Roo/bootstrap/TimeField.js
[roojs1] / Roo / bootstrap / TimeField.js
1 /*
2  * - LGPL
3  *
4  * TimeField
5  * 
6  */
7
8 /**
9  * @class Roo.bootstrap.TimeField
10  * @extends Roo.bootstrap.Input
11  * Bootstrap DateField class
12  * 
13  * 
14  * @constructor
15  * Create a new TimeField
16  * @param {Object} config The config object
17  */
18
19 Roo.bootstrap.TimeField = function(config){
20     Roo.bootstrap.TimeField.superclass.constructor.call(this, config);
21 };
22
23 Roo.extend(Roo.bootstrap.TimeField, Roo.bootstrap.Input,  {
24     
25     /**
26      * @cfg {String} format
27      * The default time format string which can be overriden for localization support.  The format must be
28      * valid according to {@link Date#parseDate} (defaults to 'H:i').
29      */
30     format : "H:i",
31     
32     
33     UTCDate: function()
34     {
35         return new Date(Date.UTC.apply(Date, arguments));
36     },
37     
38     UTCTime: function()
39     {
40         return new Date(Date.UTC.apply(Date, arguments));
41     },
42     
43     UTCToday: function()
44     {
45         var today = new Date();
46         return this.UTCDate(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate());
47     },
48     
49     UTCTodayTime: function()
50     {
51         var today = new Date();
52         return this.UTCTime(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate(), today.getUTCHours(), today.getUTCMinutes());
53     },
54     
55     getDate: function() {
56             var d = this.getUTCDate();
57             return new Date(d.getTime() + (d.getTimezoneOffset()*60000));
58     },
59     
60     getUTCDate: function() {
61             return this.date;
62     },
63     
64     setDate: function(d) {
65             this.setUTCDate(new Date(d.getTime() - (d.getTimezoneOffset()*60000)));
66     },
67     
68     setUTCDate: function(d) {
69             this.date = d;
70             this.setValue(this.formatDate(this.date));
71     },
72         
73     onRender: function(ct, position)
74     {
75         
76         Roo.bootstrap.TimeField.superclass.onRender.call(this, ct, position);
77 //        
78 //        this.language = this.language || 'en';
79 //        this.language = this.language in Roo.bootstrap.DateField.dates ? this.language : this.language.split('-')[0];
80 //        this.language = this.language in Roo.bootstrap.DateField.dates ? this.language : "en";
81 //        
82 //        this.isRTL = Roo.bootstrap.DateField.dates[this.language].rtl || false;
83 //        this.format = this.format || 'm/d/y';
84 //        this.isInline = false;
85 //        this.isInput = true;
86 //        this.component = this.el.select('.add-on', true).first() || false;
87 //        this.component = (this.component && this.component.length === 0) ? false : this.component;
88 //        this.hasInput = this.component && this.inputEL().length;
89         
90 //        if (typeof(this.minViewMode === 'string')) {
91 //            switch (this.minViewMode) {
92 //                case 'months':
93 //                    this.minViewMode = 2;
94 //                    break;
95 //                case 'years':
96 //                    this.minViewMode = 3;
97 //                    break;
98 //                case 'day':
99 //                    this.minViewMode = 1;
100 //                    break;
101 //                default:
102 //                    this.minViewMode = 0;
103 //                    break;
104 //            }
105 //        }
106         
107 //        if (typeof(this.viewMode === 'string')) {
108 //            switch (this.viewMode) {
109 //                case 'months':
110 //                    this.viewMode = 2;
111 //                    break;
112 //                case 'years':
113 //                    this.viewMode = 2;
114 //                    break;
115 //                case 'day':
116 //                    this.viewMode = 1;
117 //                    break;
118 //                default:
119 //                    this.viewMode = 0;
120 //                    break;
121 //            }
122 //        }
123                 
124         this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.TimeField.template);
125         
126         this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
127         
128         this.pop = this.picker().select('>.datepicker-time',true).first();
129         this.pop.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block' 
130         
131         this.picker().on('mousedown', this.onMousedown, this);
132         this.picker().on('click', this.onClick, this);
133         
134         this.picker().addClass('datepicker-dropdown');
135         
136 //        this.startViewMode = this.viewMode;
137         
138 //        this.weekEnd = this.weekStart === 0 ? 6 : this.weekStart - 1;
139         
140 //        this.setStartDate(this.startDate);
141 //        this.setEndDate(this.endDate);
142         
143 //        this.setDaysOfWeekDisabled(this.daysOfWeekDisabled);
144         
145 //        this.fillDow();
146 //        this.fillMonths();
147         this.fillTime();
148         this.update();
149 //        this.showMode();
150         
151 //        if(this.showTime){
152             
153 //            var dayFoot = this.picker().select('>.datepicker-days tfoot th', true).first();
154 //            var timeFoot = this.picker().select('>.datepicker-time tfoot th', true).first();
155 //
156 //            var dayFootIcon = this.picker().select('>.datepicker-days tfoot span.picker-switch-icon', true).first();
157 //            var timeFootIcon = this.picker().select('>.datepicker-time tfoot span.picker-switch-icon', true).first();
158 //            
159 //            timeFoot.addClass('switch-calendar');
160 //            dayFoot.addClass('switch-time');
161 //            
162 //            timeFootIcon.addClass('switch-calendar');
163 //            timeFootIcon.addClass('glyphicon-calendar');
164 //            
165 //            dayFootIcon.addClass('switch-time');
166 //            dayFootIcon.addClass('glyphicon-time');
167             
168         this.pop.select('>span.hours-up', true).first().on('click', this.onIncrementHours, this);
169         this.pop.select('>span.hours-down', true).first().on('click', this.onDecrementHours, this);
170         this.pop.select('>span.minutes-up', true).first().on('click', this.onIncrementMinutes, this);
171         this.pop.select('>span.minutes-down', true).first().on('click', this.onDecrementMinutes, this);
172         this.pop.select('>button', true).first().on('click', this.onTogglePeriod, this);
173
174 //        }else{
175 //            Roo.each(this.picker().select('tfoot th', true).elements, function(v){
176 //                v.remove();
177 //            });
178 //        }
179 //        
180 //        if(this.isInline) {
181 //            this.show();
182 //        }
183     },
184     
185     picker : function()
186     {
187         return this.el.select('.datepicker', true).first();
188     },
189     
190     fillTime: function()
191     {    
192         var time = this.pop.select('>tbody', true).first();
193         
194         time.dom.innerHTML = '';
195         
196         time.createChild({
197             tag: 'tr',
198             cn: [
199                 {
200                     tag: 'td',
201                     cn: [
202                         {
203                             tag: 'a',
204                             href: '#',
205                             cls: 'btn',
206                             cn: [
207                                 {
208                                     tag: 'span',
209                                     cls: 'hours-up glyphicon glyphicon-chevron-up'
210                                 }
211                             ]
212                         } 
213                     ]
214                 },
215                 {
216                     tag: 'td',
217                     cls: 'separator'
218                 },
219                 {
220                     tag: 'td',
221                     cn: [
222                         {
223                             tag: 'a',
224                             href: '#',
225                             cls: 'btn',
226                             cn: [
227                                 {
228                                     tag: 'span',
229                                     cls: 'minutes-up glyphicon glyphicon-chevron-up'
230                                 }
231                             ]
232                         }
233                     ]
234                 },
235                 {
236                     tag: 'td',
237                     cls: 'separator'
238                 }
239             ]
240         });
241         
242         time.createChild({
243             tag: 'tr',
244             cn: [
245                 {
246                     tag: 'td',
247                     cn: [
248                         {
249                             tag: 'span',
250                             cls: 'timepicker-hour',
251                             html: '00'
252                         }  
253                     ]
254                 },
255                 {
256                     tag: 'td',
257                     cls: 'separator',
258                     html: ':'
259                 },
260                 {
261                     tag: 'td',
262                     cn: [
263                         {
264                             tag: 'span',
265                             cls: 'timepicker-minute',
266                             html: '00'
267                         }  
268                     ]
269                 },
270                 {
271                     tag: 'td',
272                     cls: 'separator'
273                 },
274                 {
275                     tag: 'td',
276                     cn: [
277                         {
278                             tag: 'button',
279                             type: 'button',
280                             cls: 'btn btn-primary',
281                             html: 'AM'
282                             
283                         }
284                     ]
285                 }
286             ]
287         });
288         
289         time.createChild({
290             tag: 'tr',
291             cn: [
292                 {
293                     tag: 'td',
294                     cn: [
295                         {
296                             tag: 'a',
297                             href: '#',
298                             cls: 'btn',
299                             cn: [
300                                 {
301                                     tag: 'span',
302                                     cls: 'hours-down glyphicon glyphicon-chevron-down'
303                                 }
304                             ]
305                         }
306                     ]
307                 },
308                 {
309                     tag: 'td',
310                     cls: 'separator'
311                 },
312                 {
313                     tag: 'td',
314                     cn: [
315                         {
316                             tag: 'a',
317                             href: '#',
318                             cls: 'btn',
319                             cn: [
320                                 {
321                                     tag: 'span',
322                                     cls: 'minutes-down glyphicon glyphicon-chevron-down'
323                                 }
324                             ]
325                         }
326                     ]
327                 },
328                 {
329                     tag: 'td',
330                     cls: 'separator'
331                 }
332             ]
333         });
334         
335     },
336     
337     update: function()
338     {
339         
340         this.time = (typeof(this.time) === 'undefined') ? new Date() : this.time;
341         
342         this.fill();
343     },
344     
345     fill: function() 
346     {
347         var hours = this.time.getHours();
348         var minutes = this.time.getMinutes();
349         
350         
351     },
352 //    
353 //    showMode: function(dir) {
354 //        if (dir) {
355 //            this.viewMode = Math.max(this.minViewMode, Math.min(3, this.viewMode + dir));
356 //        }
357 //        
358 //        Roo.each(this.picker().select('>div',true).elements, function(v){
359 //            v.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
360 //            v.hide();
361 //        });
362 //        this.picker().select('>.datepicker-'+Roo.bootstrap.DateField.modes[this.viewMode].clsName, true).first().show();
363 //        
364 //    },
365     
366     place: function()
367     {
368 //        if(this.isInline) return;
369         
370         this.picker().removeClass(['bottom', 'top']);
371         
372         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
373             /*
374              * place to the top of element!
375              *
376              */
377             
378             this.picker().addClass('top');
379             this.picker().setTop(0 - this.picker().getHeight()).setLeft(this.inputEl().getLeft() - this.el.getLeft());
380             
381             return;
382         }
383         
384         this.picker().addClass('bottom');
385         
386         this.picker().setTop(this.inputEl().getHeight()).setLeft(this.inputEl().getLeft() - this.el.getLeft());
387     },
388     
389 //    parseDate : function(value){
390 //        if(!value || value instanceof Date){
391 //            return value;
392 //        }
393 //        var v = Date.parseDate(value, this.format);
394 //        if (!v && this.useIso) {
395 //            v = Date.parseDate(value, 'Y-m-d');
396 //        }
397 //        if(!v && this.altFormats){
398 //            if(!this.altFormatsArray){
399 //                this.altFormatsArray = this.altFormats.split("|");
400 //            }
401 //            for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
402 //                v = Date.parseDate(value, this.altFormatsArray[i]);
403 //            }
404 //        }
405 //        return v;
406 //    },
407     
408 //    formatDate : function(date, fmt){
409 //        return (!date || !(date instanceof Date)) ?
410 //        date : date.dateFormat(fmt || this.format);
411 //    },
412     
413     onFocus : function()
414     {
415         Roo.bootstrap.TimeField.superclass.onFocus.call(this);
416         this.show();
417     },
418     
419     onBlur : function()
420     {
421         Roo.bootstrap.TimeField.superclass.onBlur.call(this);
422         this.hide();
423     },
424     
425     show : function()
426     {
427         this.picker().show();
428         this.pop.show();
429         this.update();
430         this.place();
431     },
432     
433     hide : function()
434     {
435         this.picker().hide();
436         this.pop.hide();
437         
438     },
439     
440     onMousedown: function(e){
441         e.stopPropagation();
442         e.preventDefault();
443     },
444 //    
445 //    keyup: function(e){
446 //        Roo.bootstrap.DateField.superclass.keyup.call(this);
447 //        this.update();
448 //        
449 //    },
450     
451 //    fireKey: function(e){
452 //        if (!this.picker().isVisible()){
453 //            if (e.keyCode == 27) // allow escape to hide and re-show picker
454 //                this.show();
455 //            return;
456 //        }
457 //        var dateChanged = false,
458 //        dir, day, month,
459 //        newDate, newViewDate;
460 //        switch(e.keyCode){
461 //            case 27: // escape
462 //                this.hide();
463 //                e.preventDefault();
464 //                break;
465 //            case 37: // left
466 //            case 39: // right
467 //                if (!this.keyboardNavigation) break;
468 //                dir = e.keyCode == 37 ? -1 : 1;
469 //                
470 //                if (e.ctrlKey){
471 //                    newDate = this.moveYear(this.date, dir);
472 //                    newViewDate = this.moveYear(this.viewDate, dir);
473 //                } else if (e.shiftKey){
474 //                    newDate = this.moveMonth(this.date, dir);
475 //                    newViewDate = this.moveMonth(this.viewDate, dir);
476 //                } else {
477 //                    newDate = new Date(this.date);
478 //                    newDate.setUTCDate(this.date.getUTCDate() + dir);
479 //                    newViewDate = new Date(this.viewDate);
480 //                    newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir);
481 //                }
482 //                if (this.dateWithinRange(newDate)){
483 //                    this.date = newDate;
484 //                    this.viewDate = newViewDate;
485 //                    this.setValue(this.formatDate(this.date));
486 //                    this.update();
487 //                    e.preventDefault();
488 //                    dateChanged = true;
489 //                }
490 //                break;
491 //            case 38: // up
492 //            case 40: // down
493 //                if (!this.keyboardNavigation) break;
494 //                dir = e.keyCode == 38 ? -1 : 1;
495 //                if (e.ctrlKey){
496 //                    newDate = this.moveYear(this.date, dir);
497 //                    newViewDate = this.moveYear(this.viewDate, dir);
498 //                } else if (e.shiftKey){
499 //                    newDate = this.moveMonth(this.date, dir);
500 //                    newViewDate = this.moveMonth(this.viewDate, dir);
501 //                } else {
502 //                    newDate = new Date(this.date);
503 //                    newDate.setUTCDate(this.date.getUTCDate() + dir * 7);
504 //                    newViewDate = new Date(this.viewDate);
505 //                    newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir * 7);
506 //                }
507 //                if (this.dateWithinRange(newDate)){
508 //                    this.date = newDate;
509 //                    this.viewDate = newViewDate;
510 //                    this.setValue(this.formatDate(this.date));
511 //                    this.update();
512 //                    e.preventDefault();
513 //                    dateChanged = true;
514 //                }
515 //                break;
516 //            case 13: // enter
517 //                this.setValue(this.formatDate(this.date));
518 //                this.hide();
519 //                e.preventDefault();
520 //                break;
521 //            case 9: // tab
522 //                this.setValue(this.formatDate(this.date));
523 //                this.hide();
524 //                break;
525 //        }
526 //    },
527     
528     
529     onClick: function(e) {
530         e.stopPropagation();
531         e.preventDefault();
532         
533         var target = e.getTarget();
534         
535 //        if(target.nodeName.toLowerCase() === 'i'){
536 //            target = Roo.get(target).dom.parentNode;
537 //        }
538         
539         var nodeName = target.nodeName.trim();
540         var className = target.className.trim();
541         var html = target.innerHTML;
542         
543         Roo.log('nodeName');
544         Roo.log(nodeName);
545         
546         Roo.log('className');
547         Roo.log(className);
548         
549         Roo.log('html');
550         Roo.log(html);
551         
552         
553 //        switch(nodeName.toLowerCase()) {
554 //            case 'th':
555 //                switch(className) {
556 //                    case 'switch':
557 //                        this.showMode(1);
558 //                        break;
559 //                    case 'prev':
560 //                    case 'next':
561 //                        var dir = Roo.bootstrap.DateField.modes[this.viewMode].navStep * (className == 'prev' ? -1 : 1);
562 //                        switch(this.viewMode){
563 //                                case 0:
564 //                                        this.viewDate = this.moveMonth(this.viewDate, dir);
565 //                                        break;
566 //                                case 1:
567 //                                case 2:
568 //                                        this.viewDate = this.moveYear(this.viewDate, dir);
569 //                                        break;
570 //                        }
571 //                        this.fill();
572 //                        break;
573 //                    case 'today':
574 //                        var date = new Date();
575 //                        this.date = this.UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
576 //                        this.fill()
577 //                        this.setValue(this.formatDate(this.date));
578 //                        this.hide();
579 //                        break;
580 //                     case 'switch-time':
581 //                        this.showMode(-1);
582 //                        this.fill();
583 //                        break;
584 //                     case 'switch-calendar':
585 //                         this.showMode(1);
586 //                         this.fill();
587 //                         break;
588 //                }
589 //                break;
590 //            case 'span':
591 //                if (className.indexOf('disabled') === -1) {
592 //                    this.viewDate.setUTCDate(1);
593 //                    if (className.indexOf('month') !== -1) {
594 //                        this.viewDate.setUTCMonth(Roo.bootstrap.DateField.dates[this.language].monthsShort.indexOf(html));
595 //                    } else if(className.indexOf('picker-switch-icon') !== -1){
596 //                        if(className.indexOf('switch-time') !== -1){
597 //                            this.showMode(-1);
598 //                            this.fill();
599 //                        }else{
600 //                            this.showMode(1);
601 //                            this.fill();
602 //                        }
603 //                        
604 //                        break;
605 //                        
606 //                    } else {
607 //                        var year = parseInt(html, 10) || 0;
608 //                        this.viewDate.setUTCFullYear(year);
609 //                        
610 //                    }
611 //                    this.showMode(-1);
612 //                    this.fill();
613 //                }
614 //                break;
615 //                
616 //            case 'td':
617 //                if (className.indexOf('day') !== -1 && className.indexOf('disabled') === -1){
618 //                    var day = parseInt(html, 10) || 1;
619 //                    var year = this.viewDate.getUTCFullYear(),
620 //                        month = this.viewDate.getUTCMonth();
621 //
622 //                    if (className.indexOf('old') !== -1) {
623 //                        if(month === 0 ){
624 //                            month = 11;
625 //                            year -= 1;
626 //                        }else{
627 //                            month -= 1;
628 //                        }
629 //                    } else if (className.indexOf('new') !== -1) {
630 //                        if (month == 11) {
631 //                            month = 0;
632 //                            year += 1;
633 //                        } else {
634 //                            month += 1;
635 //                        }
636 //                    }
637 //                    this.date = this.UTCDate(year, month, day,0,0,0,0);
638 //                    this.viewDate = this.UTCDate(year, month, Math.min(28, day),0,0,0,0);
639 //                    this.fill();
640 //                    this.setValue(this.formatDate(this.date));
641 //                    this.hide();
642 //                }
643 //                break;
644 //        }
645     },
646     
647 //    setStartDate: function(startDate){
648 //        this.startDate = startDate || -Infinity;
649 //        if (this.startDate !== -Infinity) {
650 //            this.startDate = this.parseDate(this.startDate);
651 //        }
652 //        this.update();
653 //        this.updateNavArrows();
654 //    },
655 //
656 //    setEndDate: function(endDate){
657 //        this.endDate = endDate || Infinity;
658 //        if (this.endDate !== Infinity) {
659 //            this.endDate = this.parseDate(this.endDate);
660 //        }
661 //        this.update();
662 //        this.updateNavArrows();
663 //    },
664 //    
665 //    setDaysOfWeekDisabled: function(daysOfWeekDisabled){
666 //        this.daysOfWeekDisabled = daysOfWeekDisabled || [];
667 //        if (typeof(this.daysOfWeekDisabled) !== 'object') {
668 //            this.daysOfWeekDisabled = this.daysOfWeekDisabled.split(/,\s*/);
669 //        }
670 //        this.daysOfWeekDisabled = this.daysOfWeekDisabled.map(function (d) {
671 //            return parseInt(d, 10);
672 //        });
673 //        this.update();
674 //        this.updateNavArrows();
675 //    },
676 //    
677 //    updateNavArrows: function() {
678 //        var d = new Date(this.viewDate),
679 //        year = d.getUTCFullYear(),
680 //        month = d.getUTCMonth();
681 //        
682 //        Roo.each(this.picker().select('.prev', true).elements, function(v){
683 //            v.show();
684 //            switch (this.viewMode) {
685 //                case 0:
686 //
687 //                    if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear() && month <= this.startDate.getUTCMonth()) {
688 //                        v.hide();
689 //                    }
690 //                    break;
691 //                case 1:
692 //                case 2:
693 //                    if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear()) {
694 //                        v.hide();
695 //                    }
696 //                    break;
697 //            }
698 //        });
699 //        
700 //        Roo.each(this.picker().select('.next', true).elements, function(v){
701 //            v.show();
702 //            switch (this.viewMode) {
703 //                case 0:
704 //
705 //                    if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear() && month >= this.endDate.getUTCMonth()) {
706 //                        v.hide();
707 //                    }
708 //                    break;
709 //                case 1:
710 //                case 2:
711 //                    if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear()) {
712 //                        v.hide();
713 //                    }
714 //                    break;
715 //            }
716 //        })
717 //    },
718 //    
719 //    moveMonth: function(date, dir){
720 //        if (!dir) return date;
721 //        var new_date = new Date(date.valueOf()),
722 //        day = new_date.getUTCDate(),
723 //        month = new_date.getUTCMonth(),
724 //        mag = Math.abs(dir),
725 //        new_month, test;
726 //        dir = dir > 0 ? 1 : -1;
727 //        if (mag == 1){
728 //            test = dir == -1
729 //            // If going back one month, make sure month is not current month
730 //            // (eg, Mar 31 -> Feb 31 == Feb 28, not Mar 02)
731 //            ? function(){
732 //                return new_date.getUTCMonth() == month;
733 //            }
734 //            // If going forward one month, make sure month is as expected
735 //            // (eg, Jan 31 -> Feb 31 == Feb 28, not Mar 02)
736 //            : function(){
737 //                return new_date.getUTCMonth() != new_month;
738 //            };
739 //            new_month = month + dir;
740 //            new_date.setUTCMonth(new_month);
741 //            // Dec -> Jan (12) or Jan -> Dec (-1) -- limit expected date to 0-11
742 //            if (new_month < 0 || new_month > 11)
743 //                new_month = (new_month + 12) % 12;
744 //        } else {
745 //            // For magnitudes >1, move one month at a time...
746 //            for (var i=0; i<mag; i++)
747 //                // ...which might decrease the day (eg, Jan 31 to Feb 28, etc)...
748 //                new_date = this.moveMonth(new_date, dir);
749 //            // ...then reset the day, keeping it in the new month
750 //            new_month = new_date.getUTCMonth();
751 //            new_date.setUTCDate(day);
752 //            test = function(){
753 //                return new_month != new_date.getUTCMonth();
754 //            };
755 //        }
756 //        // Common date-resetting loop -- if date is beyond end of month, make it
757 //        // end of month
758 //        while (test()){
759 //            new_date.setUTCDate(--day);
760 //            new_date.setUTCMonth(new_month);
761 //        }
762 //        return new_date;
763 //    },
764 //
765 //    moveYear: function(date, dir){
766 //        return this.moveMonth(date, dir*12);
767 //    },
768 //
769 //    dateWithinRange: function(date){
770 //        return date >= this.startDate && date <= this.endDate;
771 //    },
772
773 //    remove: function() {
774 //        this.picker().remove();
775 //    },
776     
777     onIncrementHours: function()
778     {
779         Roo.log('onIncrementHours');
780     },
781     
782     onDecrementHours: function()
783     {
784         Roo.log('onDecrementHours');
785     },
786     
787     onIncrementMinutes: function()
788     {
789         Roo.log('onIncrementMinutes');
790     },
791     
792     onDecrementMinutes: function()
793     {
794         Roo.log('onDecrementMinutes');
795     },
796     
797     onTogglePeriod: function()
798     {
799         Roo.log('onTogglePeriod');
800     }
801     
802    
803 });
804
805 Roo.apply(Roo.bootstrap.TimeField,  {
806     
807     content : {
808         tag: 'tbody',
809         cn: [
810         {
811             tag: 'tr',
812             cn: [
813             {
814                 tag: 'td',
815                 colspan: '7'
816             }
817             ]
818         }
819         ]
820     }
821 });
822
823 Roo.apply(Roo.bootstrap.TimeField,  {
824   
825     template : {
826         tag: 'div',
827         cls: 'datepicker dropdown-menu',
828         cn: [
829             {
830                 tag: 'div',
831                 cls: 'datepicker-time',
832                 cn: [
833                 {
834                     tag: 'table',
835                     cls: 'table-condensed',
836                     cn:[
837                     Roo.bootstrap.DateField.content
838                     ]
839                 }
840                 ]
841             }
842         ]
843     }
844 });
845
846  
847
848