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

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