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