git.roojs.org Git - roojs1/blob - 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         var period = 'AM';
 350
 351         if(hours == 0){
 352             hours = 12;
 353         }
 354
 355         if(hours > 11){
 356             period = 'PM';
 357         }
 358
 359         if(hours > 12){
 360             hours = hours - 12;
 361         }
 362
 363         if(hours < 10){
 364             hours = '0' + hours;
 365         }
 366
 367         if(minutes < 10){
 368             minutes = '0' + minutes;
 369         }
 370
 371         this.pop.select('.timepicker-hour', true).first().dom.innerHTML = hours;
 372         this.pop.select('.timepicker-minute', true).first().dom.innerHTML = minutes;
 373         this.pop.select('button', true).first().dom.innerHTML = period;
 374
 375     },
 376 //
 377 //    showMode: function(dir) {
 378 //        if (dir) {
 379 //            this.viewMode = Math.max(this.minViewMode, Math.min(3, this.viewMode + dir));
 380 //        }
 381 //
 382 //        Roo.each(this.picker().select('>div',true).elements, function(v){
 383 //            v.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 384 //            v.hide();
 385 //        });
 386 //        this.picker().select('>.datepicker-'+Roo.bootstrap.DateField.modes[this.viewMode].clsName, true).first().show();
 387 //
 388 //    },
 389
 390     place: function()
 391     {
 392 //        if(this.isInline) return;
 393
 394         this.picker().removeClass(['bottom', 'top']);
 395
 396         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
 397             /*
 398              * place to the top of element!
 399              *
 400              */
 401
 402             this.picker().addClass('top');
 403             this.picker().setTop(0 - this.picker().getHeight()).setLeft(this.inputEl().getLeft() - this.el.getLeft());
 404
 405             return;
 406         }
 407
 408         this.picker().addClass('bottom');
 409
 410         this.picker().setTop(this.inputEl().getHeight()).setLeft(this.inputEl().getLeft() - this.el.getLeft());
 411     },
 412
 413 //    parseDate : function(value){
 414 //        if(!value || value instanceof Date){
 415 //            return value;
 416 //        }
 417 //        var v = Date.parseDate(value, this.format);
 418 //        if (!v && this.useIso) {
 419 //            v = Date.parseDate(value, 'Y-m-d');
 420 //        }
 421 //        if(!v && this.altFormats){
 422 //            if(!this.altFormatsArray){
 423 //                this.altFormatsArray = this.altFormats.split("|");
 424 //            }
 425 //            for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
 426 //                v = Date.parseDate(value, this.altFormatsArray[i]);
 427 //            }
 428 //        }
 429 //        return v;
 430 //    },
 431
 432 //    formatDate : function(date, fmt){
 433 //        return (!date || !(date instanceof Date)) ?
 434 //        date : date.dateFormat(fmt || this.format);
 435 //    },
 436
 437     onFocus : function()
 438     {
 439         Roo.bootstrap.TimeField.superclass.onFocus.call(this);
 440         this.show();
 441     },
 442
 443     onBlur : function()
 444     {
 445         Roo.bootstrap.TimeField.superclass.onBlur.call(this);
 446         this.hide();
 447     },
 448
 449     show : function()
 450     {
 451         this.picker().show();
 452         this.pop.show();
 453         this.update();
 454         this.place();
 455     },
 456
 457     hide : function()
 458     {
 459         this.picker().hide();
 460         this.pop.hide();
 461
 462     },
 463
 464     onMousedown: function(e){
 465         e.stopPropagation();
 466         e.preventDefault();
 467     },
 468 //
 469 //    keyup: function(e){
 470 //        Roo.bootstrap.DateField.superclass.keyup.call(this);
 471 //        this.update();
 472 //
 473 //    },
 474
 475 //    fireKey: function(e){
 476 //        if (!this.picker().isVisible()){
 477 //            if (e.keyCode == 27) // allow escape to hide and re-show picker
 478 //                this.show();
 479 //            return;
 480 //        }
 481 //        var dateChanged = false,
 482 //        dir, day, month,
 483 //        newDate, newViewDate;
 484 //        switch(e.keyCode){
 485 //            case 27: // escape
 486 //                this.hide();
 487 //                e.preventDefault();
 488 //                break;
 489 //            case 37: // left
 490 //            case 39: // right
 491 //                if (!this.keyboardNavigation) break;
 492 //                dir = e.keyCode == 37 ? -1 : 1;
 493 //
 494 //                if (e.ctrlKey){
 495 //                    newDate = this.moveYear(this.date, dir);
 496 //                    newViewDate = this.moveYear(this.viewDate, dir);
 497 //                } else if (e.shiftKey){
 498 //                    newDate = this.moveMonth(this.date, dir);
 499 //                    newViewDate = this.moveMonth(this.viewDate, dir);
 500 //                } else {
 501 //                    newDate = new Date(this.date);
 502 //                    newDate.setUTCDate(this.date.getUTCDate() + dir);
 503 //                    newViewDate = new Date(this.viewDate);
 504 //                    newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir);
 505 //                }
 506 //                if (this.dateWithinRange(newDate)){
 507 //                    this.date = newDate;
 508 //                    this.viewDate = newViewDate;
 509 //                    this.setValue(this.formatDate(this.date));
 510 //                    this.update();
 511 //                    e.preventDefault();
 512 //                    dateChanged = true;
 513 //                }
 514 //                break;
 515 //            case 38: // up
 516 //            case 40: // down
 517 //                if (!this.keyboardNavigation) break;
 518 //                dir = e.keyCode == 38 ? -1 : 1;
 519 //                if (e.ctrlKey){
 520 //                    newDate = this.moveYear(this.date, dir);
 521 //                    newViewDate = this.moveYear(this.viewDate, dir);
 522 //                } else if (e.shiftKey){
 523 //                    newDate = this.moveMonth(this.date, dir);
 524 //                    newViewDate = this.moveMonth(this.viewDate, dir);
 525 //                } else {
 526 //                    newDate = new Date(this.date);
 527 //                    newDate.setUTCDate(this.date.getUTCDate() + dir * 7);
 528 //                    newViewDate = new Date(this.viewDate);
 529 //                    newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir * 7);
 530 //                }
 531 //                if (this.dateWithinRange(newDate)){
 532 //                    this.date = newDate;
 533 //                    this.viewDate = newViewDate;
 534 //                    this.setValue(this.formatDate(this.date));
 535 //                    this.update();
 536 //                    e.preventDefault();
 537 //                    dateChanged = true;
 538 //                }
 539 //                break;
 540 //            case 13: // enter
 541 //                this.setValue(this.formatDate(this.date));
 542 //                this.hide();
 543 //                e.preventDefault();
 544 //                break;
 545 //            case 9: // tab
 546 //                this.setValue(this.formatDate(this.date));
 547 //                this.hide();
 548 //                break;
 549 //        }
 550 //    },
 551
 552
 553     onClick: function(e) {
 554         e.stopPropagation();
 555         e.preventDefault();
 556
 557         var target = e.getTarget();
 558
 559 //        if(target.nodeName.toLowerCase() === 'i'){
 560 //            target = Roo.get(target).dom.parentNode;
 561 //        }
 562
 563         var nodeName = target.nodeName.trim();
 564         var className = target.className.trim();
 565         var html = target.innerHTML;
 566
 567         Roo.log('nodeName');
 568         Roo.log(nodeName);
 569
 570         Roo.log('className');
 571         Roo.log(className);
 572
 573         Roo.log('html');
 574         Roo.log(html);
 575
 576
 577 //        switch(nodeName.toLowerCase()) {
 578 //            case 'th':
 579 //                switch(className) {
 580 //                    case 'switch':
 581 //                        this.showMode(1);
 582 //                        break;
 583 //                    case 'prev':
 584 //                    case 'next':
 585 //                        var dir = Roo.bootstrap.DateField.modes[this.viewMode].navStep * (className == 'prev' ? -1 : 1);
 586 //                        switch(this.viewMode){
 587 //                                case 0:
 588 //                                        this.viewDate = this.moveMonth(this.viewDate, dir);
 589 //                                        break;
 590 //                                case 1:
 591 //                                case 2:
 592 //                                        this.viewDate = this.moveYear(this.viewDate, dir);
 593 //                                        break;
 594 //                        }
 595 //                        this.fill();
 596 //                        break;
 597 //                    case 'today':
 598 //                        var date = new Date();
 599 //                        this.date = this.UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
 600 //                        this.fill()
 601 //                        this.setValue(this.formatDate(this.date));
 602 //                        this.hide();
 603 //                        break;
 604 //                     case 'switch-time':
 605 //                        this.showMode(-1);
 606 //                        this.fill();
 607 //                        break;
 608 //                     case 'switch-calendar':
 609 //                         this.showMode(1);
 610 //                         this.fill();
 611 //                         break;
 612 //                }
 613 //                break;
 614 //            case 'span':
 615 //                if (className.indexOf('disabled') === -1) {
 616 //                    this.viewDate.setUTCDate(1);
 617 //                    if (className.indexOf('month') !== -1) {
 618 //                        this.viewDate.setUTCMonth(Roo.bootstrap.DateField.dates[this.language].monthsShort.indexOf(html));
 619 //                    } else if(className.indexOf('picker-switch-icon') !== -1){
 620 //                        if(className.indexOf('switch-time') !== -1){
 621 //                            this.showMode(-1);
 622 //                            this.fill();
 623 //                        }else{
 624 //                            this.showMode(1);
 625 //                            this.fill();
 626 //                        }
 627 //
 628 //                        break;
 629 //
 630 //                    } else {
 631 //                        var year = parseInt(html, 10) || 0;
 632 //                        this.viewDate.setUTCFullYear(year);
 633 //
 634 //                    }
 635 //                    this.showMode(-1);
 636 //                    this.fill();
 637 //                }
 638 //                break;
 639 //
 640 //            case 'td':
 641 //                if (className.indexOf('day') !== -1 && className.indexOf('disabled') === -1){
 642 //                    var day = parseInt(html, 10) || 1;
 643 //                    var year = this.viewDate.getUTCFullYear(),
 644 //                        month = this.viewDate.getUTCMonth();
 645 //
 646 //                    if (className.indexOf('old') !== -1) {
 647 //                        if(month === 0 ){
 648 //                            month = 11;
 649 //                            year -= 1;
 650 //                        }else{
 651 //                            month -= 1;
 652 //                        }
 653 //                    } else if (className.indexOf('new') !== -1) {
 654 //                        if (month == 11) {
 655 //                            month = 0;
 656 //                            year += 1;
 657 //                        } else {
 658 //                            month += 1;
 659 //                        }
 660 //                    }
 661 //                    this.date = this.UTCDate(year, month, day,0,0,0,0);
 662 //                    this.viewDate = this.UTCDate(year, month, Math.min(28, day),0,0,0,0);
 663 //                    this.fill();
 664 //                    this.setValue(this.formatDate(this.date));
 665 //                    this.hide();
 666 //                }
 667 //                break;
 668 //        }
 669     },
 670
 671 //    setStartDate: function(startDate){
 672 //        this.startDate = startDate || -Infinity;
 673 //        if (this.startDate !== -Infinity) {
 674 //            this.startDate = this.parseDate(this.startDate);
 675 //        }
 676 //        this.update();
 677 //        this.updateNavArrows();
 678 //    },
 679 //
 680 //    setEndDate: function(endDate){
 681 //        this.endDate = endDate || Infinity;
 682 //        if (this.endDate !== Infinity) {
 683 //            this.endDate = this.parseDate(this.endDate);
 684 //        }
 685 //        this.update();
 686 //        this.updateNavArrows();
 687 //    },
 688 //
 689 //    setDaysOfWeekDisabled: function(daysOfWeekDisabled){
 690 //        this.daysOfWeekDisabled = daysOfWeekDisabled || [];
 691 //        if (typeof(this.daysOfWeekDisabled) !== 'object') {
 692 //            this.daysOfWeekDisabled = this.daysOfWeekDisabled.split(/,\s*/);
 693 //        }
 694 //        this.daysOfWeekDisabled = this.daysOfWeekDisabled.map(function (d) {
 695 //            return parseInt(d, 10);
 696 //        });
 697 //        this.update();
 698 //        this.updateNavArrows();
 699 //    },
 700 //
 701 //    updateNavArrows: function() {
 702 //        var d = new Date(this.viewDate),
 703 //        year = d.getUTCFullYear(),
 704 //        month = d.getUTCMonth();
 705 //
 706 //        Roo.each(this.picker().select('.prev', true).elements, function(v){
 707 //            v.show();
 708 //            switch (this.viewMode) {
 709 //                case 0:
 710 //
 711 //                    if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear() && month <= this.startDate.getUTCMonth()) {
 712 //                        v.hide();
 713 //                    }
 714 //                    break;
 715 //                case 1:
 716 //                case 2:
 717 //                    if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear()) {
 718 //                        v.hide();
 719 //                    }
 720 //                    break;
 721 //            }
 722 //        });
 723 //
 724 //        Roo.each(this.picker().select('.next', true).elements, function(v){
 725 //            v.show();
 726 //            switch (this.viewMode) {
 727 //                case 0:
 728 //
 729 //                    if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear() && month >= this.endDate.getUTCMonth()) {
 730 //                        v.hide();
 731 //                    }
 732 //                    break;
 733 //                case 1:
 734 //                case 2:
 735 //                    if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear()) {
 736 //                        v.hide();
 737 //                    }
 738 //                    break;
 739 //            }
 740 //        })
 741 //    },
 742 //
 743 //    moveMonth: function(date, dir){
 744 //        if (!dir) return date;
 745 //        var new_date = new Date(date.valueOf()),
 746 //        day = new_date.getUTCDate(),
 747 //        month = new_date.getUTCMonth(),
 748 //        mag = Math.abs(dir),
 749 //        new_month, test;
 750 //        dir = dir > 0 ? 1 : -1;
 751 //        if (mag == 1){
 752 //            test = dir == -1
 753 //            // If going back one month, make sure month is not current month
 754 //            // (eg, Mar 31 -> Feb 31 == Feb 28, not Mar 02)
 755 //            ? function(){
 756 //                return new_date.getUTCMonth() == month;
 757 //            }
 758 //            // If going forward one month, make sure month is as expected
 759 //            // (eg, Jan 31 -> Feb 31 == Feb 28, not Mar 02)
 760 //            : function(){
 761 //                return new_date.getUTCMonth() != new_month;
 762 //            };
 763 //            new_month = month + dir;
 764 //            new_date.setUTCMonth(new_month);
 765 //            // Dec -> Jan (12) or Jan -> Dec (-1) -- limit expected date to 0-11
 766 //            if (new_month < 0 || new_month > 11)
 767 //                new_month = (new_month + 12) % 12;
 768 //        } else {
 769 //            // For magnitudes >1, move one month at a time...
 770 //            for (var i=0; i<mag; i++)
 771 //                // ...which might decrease the day (eg, Jan 31 to Feb 28, etc)...
 772 //                new_date = this.moveMonth(new_date, dir);
 773 //            // ...then reset the day, keeping it in the new month
 774 //            new_month = new_date.getUTCMonth();
 775 //            new_date.setUTCDate(day);
 776 //            test = function(){
 777 //                return new_month != new_date.getUTCMonth();
 778 //            };
 779 //        }
 780 //        // Common date-resetting loop -- if date is beyond end of month, make it
 781 //        // end of month
 782 //        while (test()){
 783 //            new_date.setUTCDate(--day);
 784 //            new_date.setUTCMonth(new_month);
 785 //        }
 786 //        return new_date;
 787 //    },
 788 //
 789 //    moveYear: function(date, dir){
 790 //        return this.moveMonth(date, dir*12);
 791 //    },
 792 //
 793 //    dateWithinRange: function(date){
 794 //        return date >= this.startDate && date <= this.endDate;
 795 //    },
 796
 797 //    remove: function() {
 798 //        this.picker().remove();
 799 //    },
 800
 801     onIncrementHours: function()
 802     {
 803         Roo.log('onIncrementHours');
 804         this.time = this.time.add(Date.HOUR, 1);
 805         this.update();
 806
 807     },
 808
 809     onDecrementHours: function()
 810     {
 811         Roo.log('onDecrementHours');
 812         this.time = this.time.add(Date.HOUR, -1);
 813         this.update();
 814     },
 815
 816     onIncrementMinutes: function()
 817     {
 818         Roo.log('onIncrementMinutes');
 819         this.time = this.time.add(Date.MINUTE, 1);
 820         this.update();
 821     },
 822
 823     onDecrementMinutes: function()
 824     {
 825         Roo.log('onDecrementMinutes');
 826         this.time = this.time.add(Date.MINUTE, -1);
 827         this.update();
 828     },
 829
 830     onTogglePeriod: function()
 831     {
 832         Roo.log('onTogglePeriod');
 833         this.time = this.time.add(Date.HOUR, 12);
 834         this.update();
 835     }
 836
 837
 838 });
 839
 840 Roo.apply(Roo.bootstrap.TimeField,  {
 841
 842     content : {
 843         tag: 'tbody',
 844         cn: [
 845         {
 846             tag: 'tr',
 847             cn: [
 848             {
 849                 tag: 'td',
 850                 colspan: '7'
 851             }
 852             ]
 853         }
 854         ]
 855     }
 856 });
 857
 858 Roo.apply(Roo.bootstrap.TimeField,  {
 859
 860     template : {
 861         tag: 'div',
 862         cls: 'datepicker dropdown-menu',
 863         cn: [
 864             {
 865                 tag: 'div',
 866                 cls: 'datepicker-time',
 867                 cn: [
 868                 {
 869                     tag: 'table',
 870                     cls: 'table-condensed',
 871                     cn:[
 872                     Roo.bootstrap.DateField.content
 873                     ]
 874                 }
 875                 ]
 876             }
 877         ]
 878     }
 879 });
 880
 881
 882
 883