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