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