git.roojs.org Git - roojs1/blob - Roo/bootstrap/DateField.js

   1 /*
   2  * - LGPL
   3  *
   4  * DateField
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.DateField
  10  * @extends Roo.bootstrap.Input
  11  * Bootstrap DateField class
  12  * @cfg {Number} weekStart default 0
  13  * @cfg {String} viewMode default empty, (months|years)
  14  * @cfg {String} minViewMode default empty, (months|years)
  15  * @cfg {Number} startDate default -Infinity
  16  * @cfg {Number} endDate default Infinity
  17  * @cfg {Boolean} todayHighlight default false
  18  * @cfg {Boolean} todayBtn default false
  19  * @cfg {Boolean} calendarWeeks default false
  20  * @cfg {Object} daysOfWeekDisabled default empty
  21  * @cfg {Boolean} singleMode default false (true | false)
  22  *
  23  * @cfg {Boolean} keyboardNavigation default true
  24  * @cfg {String} language default en
  25  *
  26  * @constructor
  27  * Create a new DateField
  28  * @param {Object} config The config object
  29  */
  30
  31 Roo.bootstrap.DateField = function(config){
  32     Roo.bootstrap.DateField.superclass.constructor.call(this, config);
  33      this.addEvents({
  34             /**
  35              * @event show
  36              * Fires when this field show.
  37              * @param {Roo.bootstrap.DateField} this
  38              * @param {Mixed} date The date value
  39              */
  40             show : true,
  41             /**
  42              * @event show
  43              * Fires when this field hide.
  44              * @param {Roo.bootstrap.DateField} this
  45              * @param {Mixed} date The date value
  46              */
  47             hide : true,
  48             /**
  49              * @event select
  50              * Fires when select a date.
  51              * @param {Roo.bootstrap.DateField} this
  52              * @param {Mixed} date The date value
  53              */
  54             select : true
  55         });
  56 };
  57
  58 Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input,  {
  59
  60     /**
  61      * @cfg {String} format
  62      * The default date format string which can be overriden for localization support.  The format must be
  63      * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
  64      */
  65     format : "m/d/y",
  66     /**
  67      * @cfg {String} altFormats
  68      * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined
  69      * format (defaults to 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d').
  70      */
  71     altFormats : "m/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d",
  72
  73     weekStart : 0,
  74
  75     viewMode : '',
  76
  77     minViewMode : '',
  78
  79     todayHighlight : false,
  80
  81     todayBtn: false,
  82
  83     language: 'en',
  84
  85     keyboardNavigation: true,
  86
  87     calendarWeeks: false,
  88
  89     startDate: -Infinity,
  90
  91     endDate: Infinity,
  92
  93     daysOfWeekDisabled: [],
  94
  95     _events: [],
  96
  97     singleMode : false,
  98
  99     UTCDate: function()
 100     {
 101         return new Date(Date.UTC.apply(Date, arguments));
 102     },
 103
 104     UTCToday: function()
 105     {
 106         var today = new Date();
 107         return this.UTCDate(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate());
 108     },
 109
 110     getDate: function() {
 111             var d = this.getUTCDate();
 112             return new Date(d.getTime() + (d.getTimezoneOffset()*60000));
 113     },
 114
 115     getUTCDate: function() {
 116             return this.date;
 117     },
 118
 119     setDate: function(d) {
 120             this.setUTCDate(new Date(d.getTime() - (d.getTimezoneOffset()*60000)));
 121     },
 122
 123     setUTCDate: function(d) {
 124             this.date = d;
 125             this.setValue(this.formatDate(this.date));
 126     },
 127
 128     onRender: function(ct, position)
 129     {
 130
 131         Roo.bootstrap.DateField.superclass.onRender.call(this, ct, position);
 132
 133         this.language = this.language || 'en';
 134         this.language = this.language in Roo.bootstrap.DateField.dates ? this.language : this.language.split('-')[0];
 135         this.language = this.language in Roo.bootstrap.DateField.dates ? this.language : "en";
 136
 137         this.isRTL = Roo.bootstrap.DateField.dates[this.language].rtl || false;
 138         this.format = this.format || 'm/d/y';
 139         this.isInline = false;
 140         this.isInput = true;
 141         this.component = this.el.select('.add-on', true).first() || false;
 142         this.component = (this.component && this.component.length === 0) ? false : this.component;
 143         this.hasInput = this.component && this.inputEL().length;
 144
 145         if (typeof(this.minViewMode === 'string')) {
 146             switch (this.minViewMode) {
 147                 case 'months':
 148                     this.minViewMode = 1;
 149                     break;
 150                 case 'years':
 151                     this.minViewMode = 2;
 152                     break;
 153                 default:
 154                     this.minViewMode = 0;
 155                     break;
 156             }
 157         }
 158
 159         if (typeof(this.viewMode === 'string')) {
 160             switch (this.viewMode) {
 161                 case 'months':
 162                     this.viewMode = 1;
 163                     break;
 164                 case 'years':
 165                     this.viewMode = 2;
 166                     break;
 167                 default:
 168                     this.viewMode = 0;
 169                     break;
 170             }
 171         }
 172
 173         this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.DateField.template);
 174
 175 //        this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.DateField.template);
 176
 177         this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 178
 179         this.picker().on('mousedown', this.onMousedown, this);
 180         this.picker().on('click', this.onClick, this);
 181
 182         this.picker().addClass('datepicker-dropdown');
 183
 184         this.startViewMode = this.viewMode;
 185
 186         if(this.singleMode){
 187             Roo.each(this.picker().select('thead > tr > th', true).elements, function(v){
 188                 v.setVisibilityMode(Roo.Element.DISPLAY)
 189                 v.hide();
 190             })
 191             Roo.log('run1!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
 192             Roo.log(this.picker().select('tbody > tr > td', true).first());
 193             this.picker().select('tbody > tr > td', true).first().setStyle('width', '189px');
 194         }
 195
 196         Roo.each(this.picker().select('tfoot th.today', true).elements, function(v){
 197             if(!this.calendarWeeks){
 198                 v.remove();
 199                 return;
 200             };
 201
 202             v.dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today
 203             v.attr('colspan', function(i, val){
 204                 return parseInt(val) + 1;
 205             });
 206         })
 207
 208
 209         this.weekEnd = this.weekStart === 0 ? 6 : this.weekStart - 1;
 210
 211         this.setStartDate(this.startDate);
 212         this.setEndDate(this.endDate);
 213
 214         this.setDaysOfWeekDisabled(this.daysOfWeekDisabled);
 215
 216         this.fillDow();
 217         this.fillMonths();
 218         this.update();
 219         this.showMode();
 220
 221         if(this.isInline) {
 222             this.show();
 223         }
 224     },
 225
 226     picker : function()
 227     {
 228         return this.pickerEl;
 229 //        return this.el.select('.datepicker', true).first();
 230     },
 231
 232     fillDow: function()
 233     {
 234         var dowCnt = this.weekStart;
 235
 236         var dow = {
 237             tag: 'tr',
 238             cn: [
 239
 240             ]
 241         };
 242
 243         if(this.calendarWeeks){
 244             dow.cn.push({
 245                 tag: 'th',
 246                 cls: 'cw',
 247                 html: '&nbsp;'
 248             })
 249         }
 250
 251         while (dowCnt < this.weekStart + 7) {
 252             dow.cn.push({
 253                 tag: 'th',
 254                 cls: 'dow',
 255                 html: Roo.bootstrap.DateField.dates[this.language].daysMin[(dowCnt++)%7]
 256             });
 257         }
 258
 259         this.picker().select('>.datepicker-days thead', true).first().createChild(dow);
 260     },
 261
 262     fillMonths: function()
 263     {
 264         var i = 0
 265         var months = this.picker().select('>.datepicker-months td', true).first();
 266
 267         months.dom.innerHTML = '';
 268
 269         while (i < 12) {
 270             var month = {
 271                 tag: 'span',
 272                 cls: 'month',
 273                 html: Roo.bootstrap.DateField.dates[this.language].monthsShort[i++]
 274             }
 275
 276             months.createChild(month);
 277         }
 278
 279     },
 280
 281     update: function()
 282     {
 283         this.date = (typeof(this.date) === 'undefined' || ((typeof(this.date) === 'string') && !this.date.length)) ? this.UTCToday() : (typeof(this.date) === 'string') ? this.parseDate(this.date) : this.date;
 284
 285         if (this.date < this.startDate) {
 286             this.viewDate = new Date(this.startDate);
 287         } else if (this.date > this.endDate) {
 288             this.viewDate = new Date(this.endDate);
 289         } else {
 290             this.viewDate = new Date(this.date);
 291         }
 292
 293         this.fill();
 294     },
 295
 296     fill: function()
 297     {
 298         var d = new Date(this.viewDate),
 299                 year = d.getUTCFullYear(),
 300                 month = d.getUTCMonth(),
 301                 startYear = this.startDate !== -Infinity ? this.startDate.getUTCFullYear() : -Infinity,
 302                 startMonth = this.startDate !== -Infinity ? this.startDate.getUTCMonth() : -Infinity,
 303                 endYear = this.endDate !== Infinity ? this.endDate.getUTCFullYear() : Infinity,
 304                 endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() : Infinity,
 305                 currentDate = this.date && this.date.valueOf(),
 306                 today = this.UTCToday();
 307
 308         this.picker().select('>.datepicker-days thead th.switch', true).first().dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].months[month]+' '+year;
 309
 310 //        this.picker().select('>tfoot th.today', true).first().dom.innerHTML = Roo.bootstrap.DateField.dates[this.language].today;
 311
 312 //        this.picker.select('>tfoot th.today').
 313 //                                              .text(dates[this.language].today)
 314 //                                              .toggle(this.todayBtn !== false);
 315
 316         this.updateNavArrows();
 317         this.fillMonths();
 318
 319         var prevMonth = this.UTCDate(year, month-1, 28,0,0,0,0),
 320
 321         day = prevMonth.getDaysInMonth(prevMonth.getUTCFullYear(), prevMonth.getUTCMonth());
 322
 323         prevMonth.setUTCDate(day);
 324
 325         prevMonth.setUTCDate(day - (prevMonth.getUTCDay() - this.weekStart + 7)%7);
 326
 327         var nextMonth = new Date(prevMonth);
 328
 329         nextMonth.setUTCDate(nextMonth.getUTCDate() + 42);
 330
 331         nextMonth = nextMonth.valueOf();
 332
 333         var fillMonths = false;
 334
 335         this.picker().select('>.datepicker-days tbody',true).first().dom.innerHTML = '';
 336
 337         while(prevMonth.valueOf() < nextMonth) {
 338             var clsName = '';
 339
 340             if (prevMonth.getUTCDay() === this.weekStart) {
 341                 if(fillMonths){
 342                     this.picker().select('>.datepicker-days tbody',true).first().createChild(fillMonths);
 343                 }
 344
 345                 fillMonths = {
 346                     tag: 'tr',
 347                     cn: []
 348                 };
 349
 350                 if(this.calendarWeeks){
 351                     // ISO 8601: First week contains first thursday.
 352                     // ISO also states week starts on Monday, but we can be more abstract here.
 353                     var
 354                     // Start of current week: based on weekstart/current date
 355                     ws = new Date(+prevMonth + (this.weekStart - prevMonth.getUTCDay() - 7) % 7 * 864e5),
 356                     // Thursday of this week
 357                     th = new Date(+ws + (7 + 4 - ws.getUTCDay()) % 7 * 864e5),
 358                     // First Thursday of year, year from thursday
 359                     yth = new Date(+(yth = this.UTCDate(th.getUTCFullYear(), 0, 1)) + (7 + 4 - yth.getUTCDay())%7*864e5),
 360                     // Calendar week: ms between thursdays, div ms per day, div 7 days
 361                     calWeek =  (th - yth) / 864e5 / 7 + 1;
 362
 363                     fillMonths.cn.push({
 364                         tag: 'td',
 365                         cls: 'cw',
 366                         html: calWeek
 367                     });
 368                 }
 369             }
 370
 371             if (prevMonth.getUTCFullYear() < year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() < month)) {
 372                 clsName += ' old';
 373             } else if (prevMonth.getUTCFullYear() > year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() > month)) {
 374                 clsName += ' new';
 375             }
 376             if (this.todayHighlight &&
 377                 prevMonth.getUTCFullYear() == today.getFullYear() &&
 378                 prevMonth.getUTCMonth() == today.getMonth() &&
 379                 prevMonth.getUTCDate() == today.getDate()) {
 380                 clsName += ' today';
 381             }
 382
 383             if (currentDate && prevMonth.valueOf() === currentDate) {
 384                 clsName += ' active';
 385             }
 386
 387             if (prevMonth.valueOf() < this.startDate || prevMonth.valueOf() > this.endDate ||
 388                     this.daysOfWeekDisabled.indexOf(prevMonth.getUTCDay()) !== -1) {
 389                     clsName += ' disabled';
 390             }
 391
 392             fillMonths.cn.push({
 393                 tag: 'td',
 394                 cls: 'day ' + clsName,
 395                 html: prevMonth.getDate()
 396             })
 397
 398             prevMonth.setDate(prevMonth.getDate()+1);
 399         }
 400
 401         var currentYear = this.date && this.date.getUTCFullYear();
 402         var currentMonth = this.date && this.date.getUTCMonth();
 403
 404         this.picker().select('>.datepicker-months th.switch',true).first().dom.innerHTML = year;
 405
 406         Roo.each(this.picker().select('>.datepicker-months tbody span',true).elements, function(v,k){
 407             v.removeClass('active');
 408
 409             if(currentYear === year && k === currentMonth){
 410                 v.addClass('active');
 411             }
 412
 413             if (year < startYear || year > endYear || (year == startYear && k < startMonth) || (year == endYear && k > endMonth)) {
 414                 v.addClass('disabled');
 415             }
 416
 417         });
 418
 419
 420         year = parseInt(year/10, 10) * 10;
 421
 422         this.picker().select('>.datepicker-years th.switch', true).first().dom.innerHTML = year + '-' + (year + 9);
 423
 424         this.picker().select('>.datepicker-years tbody td',true).first().dom.innerHTML = '';
 425
 426         year -= 1;
 427         for (var i = -1; i < 11; i++) {
 428             this.picker().select('>.datepicker-years tbody td',true).first().createChild({
 429                 tag: 'span',
 430                 cls: 'year' + (i === -1 || i === 10 ? ' old' : '') + (currentYear === year ? ' active' : '') + (year < startYear || year > endYear ? ' disabled' : ''),
 431                 html: year
 432             })
 433
 434             year += 1;
 435         }
 436     },
 437
 438     showMode: function(dir)
 439     {
 440         if (dir) {
 441             this.viewMode = Math.max(this.minViewMode, Math.min(2, this.viewMode + dir));
 442         }
 443
 444         Roo.each(this.picker().select('>div',true).elements, function(v){
 445             v.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
 446             v.hide();
 447         });
 448         this.picker().select('>.datepicker-'+Roo.bootstrap.DateField.modes[this.viewMode].clsName, true).first().show();
 449     },
 450
 451     place: function()
 452     {
 453         if(this.isInline) return;
 454
 455         this.picker().removeClass(['bottom', 'top']);
 456
 457         if((Roo.lib.Dom.getViewHeight() + Roo.get(document.body).getScroll().top) - (this.inputEl().getBottom() + this.picker().getHeight()) < 0){
 458             /*
 459              * place to the top of element!
 460              *
 461              */
 462
 463             this.picker().addClass('top');
 464             this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft());
 465
 466             return;
 467         }
 468
 469         this.picker().addClass('bottom');
 470
 471         this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft());
 472     },
 473
 474     parseDate : function(value)
 475     {
 476         if(!value || value instanceof Date){
 477             return value;
 478         }
 479         var v = Date.parseDate(value, this.format);
 480         if (!v && (this.useIso || value.match(/^(\d{4})-0?(\d+)-0?(\d+)/))) {
 481             v = Date.parseDate(value, 'Y-m-d');
 482         }
 483         if(!v && this.altFormats){
 484             if(!this.altFormatsArray){
 485                 this.altFormatsArray = this.altFormats.split("|");
 486             }
 487             for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
 488                 v = Date.parseDate(value, this.altFormatsArray[i]);
 489             }
 490         }
 491         return v;
 492     },
 493
 494     formatDate : function(date, fmt)
 495     {
 496         return (!date || !(date instanceof Date)) ?
 497         date : date.dateFormat(fmt || this.format);
 498     },
 499
 500     onFocus : function()
 501     {
 502         Roo.bootstrap.DateField.superclass.onFocus.call(this);
 503         this.show();
 504     },
 505
 506     onBlur : function()
 507     {
 508         Roo.bootstrap.DateField.superclass.onBlur.call(this);
 509
 510         var d = this.inputEl().getValue();
 511
 512         this.setValue(d);
 513
 514         this.hide();
 515     },
 516
 517     show : function()
 518     {
 519         this.picker().show();
 520         this.update();
 521         this.place();
 522
 523         this.fireEvent('show', this, this.date);
 524     },
 525
 526     hide : function()
 527     {
 528         if(this.isInline) return;
 529         this.picker().hide();
 530         this.viewMode = this.startViewMode;
 531         this.showMode();
 532
 533         this.fireEvent('hide', this, this.date);
 534
 535     },
 536
 537     onMousedown: function(e)
 538     {
 539         e.stopPropagation();
 540         e.preventDefault();
 541     },
 542
 543     keyup: function(e)
 544     {
 545         Roo.bootstrap.DateField.superclass.keyup.call(this);
 546         this.update();
 547     },
 548
 549     setValue: function(v)
 550     {
 551
 552         // v can be a string or a date..
 553
 554
 555         var d = new Date(this.parseDate(v) ).clearTime();
 556
 557         if(isNaN(d.getTime())){
 558             this.date = this.viewDate = '';
 559             Roo.bootstrap.DateField.superclass.setValue.call(this, '');
 560             return;
 561         }
 562
 563         v = this.formatDate(d);
 564
 565         Roo.bootstrap.DateField.superclass.setValue.call(this, v);
 566
 567         this.date = new Date(d.getTime() - d.getTimezoneOffset()*60000);
 568
 569         this.update();
 570
 571         this.fireEvent('select', this, this.date);
 572
 573     },
 574
 575     getValue: function()
 576     {
 577         return this.formatDate(this.date);
 578     },
 579
 580     fireKey: function(e)
 581     {
 582         if (!this.picker().isVisible()){
 583             if (e.keyCode == 27) // allow escape to hide and re-show picker
 584                 this.show();
 585             return;
 586         }
 587
 588         var dateChanged = false,
 589         dir, day, month,
 590         newDate, newViewDate;
 591
 592         switch(e.keyCode){
 593             case 27: // escape
 594                 this.hide();
 595                 e.preventDefault();
 596                 break;
 597             case 37: // left
 598             case 39: // right
 599                 if (!this.keyboardNavigation) break;
 600                 dir = e.keyCode == 37 ? -1 : 1;
 601
 602                 if (e.ctrlKey){
 603                     newDate = this.moveYear(this.date, dir);
 604                     newViewDate = this.moveYear(this.viewDate, dir);
 605                 } else if (e.shiftKey){
 606                     newDate = this.moveMonth(this.date, dir);
 607                     newViewDate = this.moveMonth(this.viewDate, dir);
 608                 } else {
 609                     newDate = new Date(this.date);
 610                     newDate.setUTCDate(this.date.getUTCDate() + dir);
 611                     newViewDate = new Date(this.viewDate);
 612                     newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir);
 613                 }
 614                 if (this.dateWithinRange(newDate)){
 615                     this.date = newDate;
 616                     this.viewDate = newViewDate;
 617                     this.setValue(this.formatDate(this.date));
 618 //                    this.update();
 619                     e.preventDefault();
 620                     dateChanged = true;
 621                 }
 622                 break;
 623             case 38: // up
 624             case 40: // down
 625                 if (!this.keyboardNavigation) break;
 626                 dir = e.keyCode == 38 ? -1 : 1;
 627                 if (e.ctrlKey){
 628                     newDate = this.moveYear(this.date, dir);
 629                     newViewDate = this.moveYear(this.viewDate, dir);
 630                 } else if (e.shiftKey){
 631                     newDate = this.moveMonth(this.date, dir);
 632                     newViewDate = this.moveMonth(this.viewDate, dir);
 633                 } else {
 634                     newDate = new Date(this.date);
 635                     newDate.setUTCDate(this.date.getUTCDate() + dir * 7);
 636                     newViewDate = new Date(this.viewDate);
 637                     newViewDate.setUTCDate(this.viewDate.getUTCDate() + dir * 7);
 638                 }
 639                 if (this.dateWithinRange(newDate)){
 640                     this.date = newDate;
 641                     this.viewDate = newViewDate;
 642                     this.setValue(this.formatDate(this.date));
 643 //                    this.update();
 644                     e.preventDefault();
 645                     dateChanged = true;
 646                 }
 647                 break;
 648             case 13: // enter
 649                 this.setValue(this.formatDate(this.date));
 650                 this.hide();
 651                 e.preventDefault();
 652                 break;
 653             case 9: // tab
 654                 this.setValue(this.formatDate(this.date));
 655                 this.hide();
 656                 break;
 657             case 16: // shift
 658             case 17: // ctrl
 659             case 18: // alt
 660                 break;
 661             default :
 662                 this.hide();
 663
 664         }
 665     },
 666
 667
 668     onClick: function(e)
 669     {
 670         e.stopPropagation();
 671         e.preventDefault();
 672
 673         var target = e.getTarget();
 674
 675         if(target.nodeName.toLowerCase() === 'i'){
 676             target = Roo.get(target).dom.parentNode;
 677         }
 678
 679         var nodeName = target.nodeName;
 680         var className = target.className;
 681         var html = target.innerHTML;
 682         //Roo.log(nodeName);
 683
 684         switch(nodeName.toLowerCase()) {
 685             case 'th':
 686                 switch(className) {
 687                     case 'switch':
 688                         this.showMode(1);
 689                         break;
 690                     case 'prev':
 691                     case 'next':
 692                         var dir = Roo.bootstrap.DateField.modes[this.viewMode].navStep * (className == 'prev' ? -1 : 1);
 693                         switch(this.viewMode){
 694                                 case 0:
 695                                         this.viewDate = this.moveMonth(this.viewDate, dir);
 696                                         break;
 697                                 case 1:
 698                                 case 2:
 699                                         this.viewDate = this.moveYear(this.viewDate, dir);
 700                                         break;
 701                         }
 702                         this.fill();
 703                         break;
 704                     case 'today':
 705                         var date = new Date();
 706                         this.date = this.UTCDate(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
 707 //                        this.fill()
 708                         this.setValue(this.formatDate(this.date));
 709
 710                         this.hide();
 711                         break;
 712                 }
 713                 break;
 714             case 'span':
 715                 if (className.indexOf('disabled') < 0) {
 716                     this.viewDate.setUTCDate(1);
 717                     if (className.indexOf('month') > -1) {
 718                         this.viewDate.setUTCMonth(Roo.bootstrap.DateField.dates[this.language].monthsShort.indexOf(html));
 719                     } else {
 720                         var year = parseInt(html, 10) || 0;
 721                         this.viewDate.setUTCFullYear(year);
 722
 723                     }
 724
 725                     if(this.singleMode){
 726                         this.setValue(this.formatDate(this.viewDate));
 727                         this.hide();
 728                         return;
 729                     }
 730
 731                     this.showMode(-1);
 732                     this.fill();
 733                 }
 734                 break;
 735
 736             case 'td':
 737                 //Roo.log(className);
 738                 if (className.indexOf('day') > -1 && className.indexOf('disabled') < 0 ){
 739                     var day = parseInt(html, 10) || 1;
 740                     var year = this.viewDate.getUTCFullYear(),
 741                         month = this.viewDate.getUTCMonth();
 742
 743                     if (className.indexOf('old') > -1) {
 744                         if(month === 0 ){
 745                             month = 11;
 746                             year -= 1;
 747                         }else{
 748                             month -= 1;
 749                         }
 750                     } else if (className.indexOf('new') > -1) {
 751                         if (month == 11) {
 752                             month = 0;
 753                             year += 1;
 754                         } else {
 755                             month += 1;
 756                         }
 757                     }
 758                     //Roo.log([year,month,day]);
 759                     this.date = this.UTCDate(year, month, day,0,0,0,0);
 760                     this.viewDate = this.UTCDate(year, month, Math.min(28, day),0,0,0,0);
 761 //                    this.fill();
 762                     //Roo.log(this.formatDate(this.date));
 763                     this.setValue(this.formatDate(this.date));
 764                     this.hide();
 765                 }
 766                 break;
 767         }
 768     },
 769
 770     setStartDate: function(startDate)
 771     {
 772         this.startDate = startDate || -Infinity;
 773         if (this.startDate !== -Infinity) {
 774             this.startDate = this.parseDate(this.startDate);
 775         }
 776         this.update();
 777         this.updateNavArrows();
 778     },
 779
 780     setEndDate: function(endDate)
 781     {
 782         this.endDate = endDate || Infinity;
 783         if (this.endDate !== Infinity) {
 784             this.endDate = this.parseDate(this.endDate);
 785         }
 786         this.update();
 787         this.updateNavArrows();
 788     },
 789
 790     setDaysOfWeekDisabled: function(daysOfWeekDisabled)
 791     {
 792         this.daysOfWeekDisabled = daysOfWeekDisabled || [];
 793         if (typeof(this.daysOfWeekDisabled) !== 'object') {
 794             this.daysOfWeekDisabled = this.daysOfWeekDisabled.split(/,\s*/);
 795         }
 796         this.daysOfWeekDisabled = this.daysOfWeekDisabled.map(function (d) {
 797             return parseInt(d, 10);
 798         });
 799         this.update();
 800         this.updateNavArrows();
 801     },
 802
 803     updateNavArrows: function()
 804     {
 805         if(this.singleMode){
 806             return;
 807         }
 808
 809         var d = new Date(this.viewDate),
 810         year = d.getUTCFullYear(),
 811         month = d.getUTCMonth();
 812
 813         Roo.each(this.picker().select('.prev', true).elements, function(v){
 814             v.show();
 815             switch (this.viewMode) {
 816                 case 0:
 817
 818                     if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear() && month <= this.startDate.getUTCMonth()) {
 819                         v.hide();
 820                     }
 821                     break;
 822                 case 1:
 823                 case 2:
 824                     if (this.startDate !== -Infinity && year <= this.startDate.getUTCFullYear()) {
 825                         v.hide();
 826                     }
 827                     break;
 828             }
 829         });
 830
 831         Roo.each(this.picker().select('.next', true).elements, function(v){
 832             v.show();
 833             switch (this.viewMode) {
 834                 case 0:
 835
 836                     if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear() && month >= this.endDate.getUTCMonth()) {
 837                         v.hide();
 838                     }
 839                     break;
 840                 case 1:
 841                 case 2:
 842                     if (this.endDate !== Infinity && year >= this.endDate.getUTCFullYear()) {
 843                         v.hide();
 844                     }
 845                     break;
 846             }
 847         })
 848     },
 849
 850     moveMonth: function(date, dir)
 851     {
 852         if (!dir) return date;
 853         var new_date = new Date(date.valueOf()),
 854         day = new_date.getUTCDate(),
 855         month = new_date.getUTCMonth(),
 856         mag = Math.abs(dir),
 857         new_month, test;
 858         dir = dir > 0 ? 1 : -1;
 859         if (mag == 1){
 860             test = dir == -1
 861             // If going back one month, make sure month is not current month
 862             // (eg, Mar 31 -> Feb 31 == Feb 28, not Mar 02)
 863             ? function(){
 864                 return new_date.getUTCMonth() == month;
 865             }
 866             // If going forward one month, make sure month is as expected
 867             // (eg, Jan 31 -> Feb 31 == Feb 28, not Mar 02)
 868             : function(){
 869                 return new_date.getUTCMonth() != new_month;
 870             };
 871             new_month = month + dir;
 872             new_date.setUTCMonth(new_month);
 873             // Dec -> Jan (12) or Jan -> Dec (-1) -- limit expected date to 0-11
 874             if (new_month < 0 || new_month > 11)
 875                 new_month = (new_month + 12) % 12;
 876         } else {
 877             // For magnitudes >1, move one month at a time...
 878             for (var i=0; i<mag; i++)
 879                 // ...which might decrease the day (eg, Jan 31 to Feb 28, etc)...
 880                 new_date = this.moveMonth(new_date, dir);
 881             // ...then reset the day, keeping it in the new month
 882             new_month = new_date.getUTCMonth();
 883             new_date.setUTCDate(day);
 884             test = function(){
 885                 return new_month != new_date.getUTCMonth();
 886             };
 887         }
 888         // Common date-resetting loop -- if date is beyond end of month, make it
 889         // end of month
 890         while (test()){
 891             new_date.setUTCDate(--day);
 892             new_date.setUTCMonth(new_month);
 893         }
 894         return new_date;
 895     },
 896
 897     moveYear: function(date, dir)
 898     {
 899         return this.moveMonth(date, dir*12);
 900     },
 901
 902     dateWithinRange: function(date)
 903     {
 904         return date >= this.startDate && date <= this.endDate;
 905     },
 906
 907
 908     remove: function()
 909     {
 910         this.picker().remove();
 911     }
 912
 913 });
 914
 915 Roo.apply(Roo.bootstrap.DateField,  {
 916
 917     head : {
 918         tag: 'thead',
 919         cn: [
 920         {
 921             tag: 'tr',
 922             cn: [
 923             {
 924                 tag: 'th',
 925                 cls: 'prev',
 926                 html: '<i class="fa fa-arrow-left"/>'
 927             },
 928             {
 929                 tag: 'th',
 930                 cls: 'switch',
 931                 colspan: '5'
 932             },
 933             {
 934                 tag: 'th',
 935                 cls: 'next',
 936                 html: '<i class="fa fa-arrow-right"/>'
 937             }
 938
 939             ]
 940         }
 941         ]
 942     },
 943
 944     content : {
 945         tag: 'tbody',
 946         cn: [
 947         {
 948             tag: 'tr',
 949             cn: [
 950             {
 951                 tag: 'td',
 952                 colspan: '7'
 953             }
 954             ]
 955         }
 956         ]
 957     },
 958
 959     footer : {
 960         tag: 'tfoot',
 961         cn: [
 962         {
 963             tag: 'tr',
 964             cn: [
 965             {
 966                 tag: 'th',
 967                 colspan: '7',
 968                 cls: 'today'
 969             }
 970
 971             ]
 972         }
 973         ]
 974     },
 975
 976     dates:{
 977         en: {
 978             days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
 979             daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
 980             daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
 981             months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
 982             monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
 983             today: "Today"
 984         }
 985     },
 986
 987     modes: [
 988     {
 989         clsName: 'days',
 990         navFnc: 'Month',
 991         navStep: 1
 992     },
 993     {
 994         clsName: 'months',
 995         navFnc: 'FullYear',
 996         navStep: 1
 997     },
 998     {
 999         clsName: 'years',
1000         navFnc: 'FullYear',
1001         navStep: 10
1002     }]
1003 });
1004
1005 Roo.apply(Roo.bootstrap.DateField,  {
1006
1007     template : {
1008         tag: 'div',
1009         cls: 'datepicker dropdown-menu',
1010         cn: [
1011         {
1012             tag: 'div',
1013             cls: 'datepicker-days',
1014             cn: [
1015             {
1016                 tag: 'table',
1017                 cls: 'table-condensed',
1018                 cn:[
1019                 Roo.bootstrap.DateField.head,
1020                 {
1021                     tag: 'tbody'
1022                 },
1023                 Roo.bootstrap.DateField.footer
1024                 ]
1025             }
1026             ]
1027         },
1028         {
1029             tag: 'div',
1030             cls: 'datepicker-months',
1031             cn: [
1032             {
1033                 tag: 'table',
1034                 cls: 'table-condensed',
1035                 cn:[
1036                 Roo.bootstrap.DateField.head,
1037                 Roo.bootstrap.DateField.content,
1038                 Roo.bootstrap.DateField.footer
1039                 ]
1040             }
1041             ]
1042         },
1043         {
1044             tag: 'div',
1045             cls: 'datepicker-years',
1046             cn: [
1047             {
1048                 tag: 'table',
1049                 cls: 'table-condensed',
1050                 cn:[
1051                 Roo.bootstrap.DateField.head,
1052                 Roo.bootstrap.DateField.content,
1053                 Roo.bootstrap.DateField.footer
1054                 ]
1055             }
1056             ]
1057         }
1058         ]
1059     }
1060 });
1061
1062
1063
1064