src/widgets/DatePicker.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8  * @class Ext.DatePicker
   9  * @extends Ext.Component
  10  * <p>A popup date picker. This class is used by the {@link Ext.form.DateField DateField} class
  11  * to allow browsing and selection of valid dates.</p>
  12  * <p>All the string values documented below may be overridden by including an Ext locale file in
  13  * your page.</p>
  14  * @constructor
  15  * Create a new DatePicker
  16  * @param {Object} config The config object
  17  * @xtype datepicker
  18  */
  19 Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
  20     /**
  21      * @cfg {String} todayText
  22      * The text to display on the button that selects the current date (defaults to <code>'Today'</code>)
  23      */
  24     todayText : 'Today',
  25     /**
  26      * @cfg {String} okText
  27      * The text to display on the ok button (defaults to <code>'&#160;OK&#160;'</code> to give the user extra clicking room)
  28      */
  29     okText : '&#160;OK&#160;',
  30     /**
  31      * @cfg {String} cancelText
  32      * The text to display on the cancel button (defaults to <code>'Cancel'</code>)
  33      */
  34     cancelText : 'Cancel',
  35     /**
  36      * @cfg {Function} handler
  37      * Optional. A function that will handle the select event of this picker.
  38      * The handler is passed the following parameters:<div class="mdetail-params"><ul>
  39      * <li><code>picker</code> : DatePicker<div class="sub-desc">This DatePicker.</div></li>
  40      * <li><code>date</code> : Date<div class="sub-desc">The selected date.</div></li>
  41      * </ul></div>
  42      */
  43     /**
  44      * @cfg {Object} scope
  45      * The scope (<code><b>this</b></code> reference) in which the <code>{@link #handler}</code>
  46      * function will be called.  Defaults to this DatePicker instance.
  47      */
  48     /**
  49      * @cfg {String} todayTip
  50      * A string used to format the message for displaying in a tooltip over the button that
  51      * selects the current date. Defaults to <code>'{0} (Spacebar)'</code> where
  52      * the <code>{0}</code> token is replaced by today's date.
  53      */
  54     todayTip : '{0} (Spacebar)',
  55     /**
  56      * @cfg {String} minText
  57      * The error text to display if the minDate validation fails (defaults to <code>'This date is before the minimum date'</code>)
  58      */
  59     minText : 'This date is before the minimum date',
  60     /**
  61      * @cfg {String} maxText
  62      * The error text to display if the maxDate validation fails (defaults to <code>'This date is after the maximum date'</code>)
  63      */
  64     maxText : 'This date is after the maximum date',
  65     /**
  66      * @cfg {String} format
  67      * The default date format string which can be overriden for localization support.  The format must be
  68      * valid according to {@link Date#parseDate} (defaults to <code>'m/d/y'</code>).
  69      */
  70     format : 'm/d/y',
  71     /**
  72      * @cfg {String} disabledDaysText
  73      * The tooltip to display when the date falls on a disabled day (defaults to <code>'Disabled'</code>)
  74      */
  75     disabledDaysText : 'Disabled',
  76     /**
  77      * @cfg {String} disabledDatesText
  78      * The tooltip text to display when the date falls on a disabled date (defaults to <code>'Disabled'</code>)
  79      */
  80     disabledDatesText : 'Disabled',
  81     /**
  82      * @cfg {Array} monthNames
  83      * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames)
  84      */
  85     monthNames : Date.monthNames,
  86     /**
  87      * @cfg {Array} dayNames
  88      * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames)
  89      */
  90     dayNames : Date.dayNames,
  91     /**
  92      * @cfg {String} nextText
  93      * The next month navigation button tooltip (defaults to <code>'Next Month (Control+Right)'</code>)
  94      */
  95     nextText : 'Next Month (Control+Right)',
  96     /**
  97      * @cfg {String} prevText
  98      * The previous month navigation button tooltip (defaults to <code>'Previous Month (Control+Left)'</code>)
  99      */
 100     prevText : 'Previous Month (Control+Left)',
 101     /**
 102      * @cfg {String} monthYearText
 103      * The header month selector tooltip (defaults to <code>'Choose a month (Control+Up/Down to move years)'</code>)
 104      */
 105     monthYearText : 'Choose a month (Control+Up/Down to move years)',
 106     /**
 107      * @cfg {Number} startDay
 108      * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
 109      */
 110     startDay : 0,
 111     /**
 112      * @cfg {Boolean} showToday
 113      * False to hide the footer area containing the Today button and disable the keyboard handler for spacebar
 114      * that selects the current date (defaults to <code>true</code>).
 115      */
 116     showToday : true,
 117     /**
 118      * @cfg {Date} minDate
 119      * Minimum allowable date (JavaScript date object, defaults to null)
 120      */
 121     /**
 122      * @cfg {Date} maxDate
 123      * Maximum allowable date (JavaScript date object, defaults to null)
 124      */
 125     /**
 126      * @cfg {Array} disabledDays
 127      * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
 128      */
 129     /**
 130      * @cfg {RegExp} disabledDatesRE
 131      * JavaScript regular expression used to disable a pattern of dates (defaults to null).  The {@link #disabledDates}
 132      * config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the
 133      * disabledDates value.
 134      */
 135     /**
 136      * @cfg {Array} disabledDates
 137      * An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular
 138      * expression so they are very powerful. Some examples:
 139      * <ul>
 140      * <li>['03/08/2003', '09/16/2003'] would disable those exact dates</li>
 141      * <li>['03/08', '09/16'] would disable those days for every year</li>
 142      * <li>['^03/08'] would only match the beginning (useful if you are using short years)</li>
 143      * <li>['03/../2006'] would disable every day in March 2006</li>
 144      * <li>['^03'] would disable every day in every March</li>
 145      * </ul>
 146      * Note that the format of the dates included in the array should exactly match the {@link #format} config.
 147      * In order to support regular expressions, if you are using a date format that has '.' in it, you will have to
 148      * escape the dot when restricting dates. For example: ['03\\.08\\.03'].
 149      */
 150
 151     // private
 152     // Set by other components to stop the picker focus being updated when the value changes.
 153     focusOnSelect: true,
 154
 155     // private
 156     initComponent : function(){
 157         Ext.DatePicker.superclass.initComponent.call(this);
 158
 159         this.value = this.value ?
 160                  this.value.clearTime(true) : new Date().clearTime();
 161
 162         this.addEvents(
 163             /**
 164              * @event select
 165              * Fires when a date is selected
 166              * @param {DatePicker} this DatePicker
 167              * @param {Date} date The selected date
 168              */
 169             'select'
 170         );
 171
 172         if(this.handler){
 173             this.on('select', this.handler,  this.scope || this);
 174         }
 175
 176         this.initDisabledDays();
 177     },
 178
 179     // private
 180     initDisabledDays : function(){
 181         if(!this.disabledDatesRE && this.disabledDates){
 182             var dd = this.disabledDates,
 183                 len = dd.length - 1,
 184                 re = '(?:';
 185
 186             Ext.each(dd, function(d, i){
 187                 re += Ext.isDate(d) ? '^' + Ext.escapeRe(d.dateFormat(this.format)) + '$' : dd[i];
 188                 if(i != len){
 189                     re += '|';
 190                 }
 191             }, this);
 192             this.disabledDatesRE = new RegExp(re + ')');
 193         }
 194     },
 195
 196     /**
 197      * Replaces any existing disabled dates with new values and refreshes the DatePicker.
 198      * @param {Array/RegExp} disabledDates An array of date strings (see the {@link #disabledDates} config
 199      * for details on supported values), or a JavaScript regular expression used to disable a pattern of dates.
 200      */
 201     setDisabledDates : function(dd){
 202         if(Ext.isArray(dd)){
 203             this.disabledDates = dd;
 204             this.disabledDatesRE = null;
 205         }else{
 206             this.disabledDatesRE = dd;
 207         }
 208         this.initDisabledDays();
 209         this.update(this.value, true);
 210     },
 211
 212     /**
 213      * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
 214      * @param {Array} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config
 215      * for details on supported values.
 216      */
 217     setDisabledDays : function(dd){
 218         this.disabledDays = dd;
 219         this.update(this.value, true);
 220     },
 221
 222     /**
 223      * Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker.
 224      * @param {Date} value The minimum date that can be selected
 225      */
 226     setMinDate : function(dt){
 227         this.minDate = dt;
 228         this.update(this.value, true);
 229     },
 230
 231     /**
 232      * Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker.
 233      * @param {Date} value The maximum date that can be selected
 234      */
 235     setMaxDate : function(dt){
 236         this.maxDate = dt;
 237         this.update(this.value, true);
 238     },
 239
 240     /**
 241      * Sets the value of the date field
 242      * @param {Date} value The date to set
 243      */
 244     setValue : function(value){
 245         this.value = value.clearTime(true);
 246         this.update(this.value);
 247     },
 248
 249     /**
 250      * Gets the current selected value of the date field
 251      * @return {Date} The selected date
 252      */
 253     getValue : function(){
 254         return this.value;
 255     },
 256
 257     // private
 258     focus : function(){
 259         this.update(this.activeDate);
 260     },
 261
 262     // private
 263     onEnable: function(initial){
 264         Ext.DatePicker.superclass.onEnable.call(this);
 265         this.doDisabled(false);
 266         this.update(initial ? this.value : this.activeDate);
 267         if(Ext.isIE){
 268             this.el.repaint();
 269         }
 270
 271     },
 272
 273     // private
 274     onDisable : function(){
 275         Ext.DatePicker.superclass.onDisable.call(this);
 276         this.doDisabled(true);
 277         if(Ext.isIE && !Ext.isIE8){
 278             /* Really strange problem in IE6/7, when disabled, have to explicitly
 279              * repaint each of the nodes to get them to display correctly, simply
 280              * calling repaint on the main element doesn't appear to be enough.
 281              */
 282              Ext.each([].concat(this.textNodes, this.el.query('th span')), function(el){
 283                  Ext.fly(el).repaint();
 284              });
 285         }
 286     },
 287
 288     // private
 289     doDisabled : function(disabled){
 290         this.keyNav.setDisabled(disabled);
 291         this.prevRepeater.setDisabled(disabled);
 292         this.nextRepeater.setDisabled(disabled);
 293         if(this.showToday){
 294             this.todayKeyListener.setDisabled(disabled);
 295             this.todayBtn.setDisabled(disabled);
 296         }
 297     },
 298
 299     // private
 300     onRender : function(container, position){
 301         var m = [
 302              '<table cellspacing="0">',
 303                 '<tr><td class="x-date-left"><a href="#" title="', this.prevText ,'">&#160;</a></td><td class="x-date-middle" align="center"></td><td class="x-date-right"><a href="#" title="', this.nextText ,'">&#160;</a></td></tr>',
 304                 '<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'],
 305                 dn = this.dayNames,
 306                 i;
 307         for(i = 0; i < 7; i++){
 308             var d = this.startDay+i;
 309             if(d > 6){
 310                 d = d-7;
 311             }
 312             m.push('<th><span>', dn[d].substr(0,1), '</span></th>');
 313         }
 314         m[m.length] = '</tr></thead><tbody><tr>';
 315         for(i = 0; i < 42; i++) {
 316             if(i % 7 === 0 && i !== 0){
 317                 m[m.length] = '</tr><tr>';
 318             }
 319             m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>';
 320         }
 321         m.push('</tr></tbody></table></td></tr>',
 322                 this.showToday ? '<tr><td colspan="3" class="x-date-bottom" align="center"></td></tr>' : '',
 323                 '</table><div class="x-date-mp"></div>');
 324
 325         var el = document.createElement('div');
 326         el.className = 'x-date-picker';
 327         el.innerHTML = m.join('');
 328
 329         container.dom.insertBefore(el, position);
 330
 331         this.el = Ext.get(el);
 332         this.eventEl = Ext.get(el.firstChild);
 333
 334         this.prevRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-left a'), {
 335             handler: this.showPrevMonth,
 336             scope: this,
 337             preventDefault:true,
 338             stopDefault:true
 339         });
 340
 341         this.nextRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-right a'), {
 342             handler: this.showNextMonth,
 343             scope: this,
 344             preventDefault:true,
 345             stopDefault:true
 346         });
 347
 348         this.monthPicker = this.el.down('div.x-date-mp');
 349         this.monthPicker.enableDisplayMode('block');
 350
 351         this.keyNav = new Ext.KeyNav(this.eventEl, {
 352             'left' : function(e){
 353                 if(e.ctrlKey){
 354                     this.showPrevMonth();
 355                 }else{
 356                     this.update(this.activeDate.add('d', -1));
 357                 }
 358             },
 359
 360             'right' : function(e){
 361                 if(e.ctrlKey){
 362                     this.showNextMonth();
 363                 }else{
 364                     this.update(this.activeDate.add('d', 1));
 365                 }
 366             },
 367
 368             'up' : function(e){
 369                 if(e.ctrlKey){
 370                     this.showNextYear();
 371                 }else{
 372                     this.update(this.activeDate.add('d', -7));
 373                 }
 374             },
 375
 376             'down' : function(e){
 377                 if(e.ctrlKey){
 378                     this.showPrevYear();
 379                 }else{
 380                     this.update(this.activeDate.add('d', 7));
 381                 }
 382             },
 383
 384             'pageUp' : function(e){
 385                 this.showNextMonth();
 386             },
 387
 388             'pageDown' : function(e){
 389                 this.showPrevMonth();
 390             },
 391
 392             'enter' : function(e){
 393                 e.stopPropagation();
 394                 return true;
 395             },
 396
 397             scope : this
 398         });
 399
 400         this.el.unselectable();
 401
 402         this.cells = this.el.select('table.x-date-inner tbody td');
 403         this.textNodes = this.el.query('table.x-date-inner tbody span');
 404
 405         this.mbtn = new Ext.Button({
 406             text: '&#160;',
 407             tooltip: this.monthYearText,
 408             renderTo: this.el.child('td.x-date-middle', true)
 409         });
 410         this.mbtn.el.child('em').addClass('x-btn-arrow');
 411
 412         if(this.showToday){
 413             this.todayKeyListener = this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday,  this);
 414             var today = (new Date()).dateFormat(this.format);
 415             this.todayBtn = new Ext.Button({
 416                 renderTo: this.el.child('td.x-date-bottom', true),
 417                 text: String.format(this.todayText, today),
 418                 tooltip: String.format(this.todayTip, today),
 419                 handler: this.selectToday,
 420                 scope: this
 421             });
 422         }
 423         this.mon(this.eventEl, 'mousewheel', this.handleMouseWheel, this);
 424         this.mon(this.eventEl, 'click', this.handleDateClick,  this, {delegate: 'a.x-date-date'});
 425         this.mon(this.mbtn, 'click', this.showMonthPicker, this);
 426         this.onEnable(true);
 427     },
 428
 429     // private
 430     createMonthPicker : function(){
 431         if(!this.monthPicker.dom.firstChild){
 432             var buf = ['<table border="0" cellspacing="0">'];
 433             for(var i = 0; i < 6; i++){
 434                 buf.push(
 435                     '<tr><td class="x-date-mp-month"><a href="#">', Date.getShortMonthName(i), '</a></td>',
 436                     '<td class="x-date-mp-month x-date-mp-sep"><a href="#">', Date.getShortMonthName(i + 6), '</a></td>',
 437                     i === 0 ?
 438                     '<td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-prev"></a></td><td class="x-date-mp-ybtn" align="center"><a class="x-date-mp-next"></a></td></tr>' :
 439                     '<td class="x-date-mp-year"><a href="#"></a></td><td class="x-date-mp-year"><a href="#"></a></td></tr>'
 440                 );
 441             }
 442             buf.push(
 443                 '<tr class="x-date-mp-btns"><td colspan="4"><button type="button" class="x-date-mp-ok">',
 444                     this.okText,
 445                     '</button><button type="button" class="x-date-mp-cancel">',
 446                     this.cancelText,
 447                     '</button></td></tr>',
 448                 '</table>'
 449             );
 450             this.monthPicker.update(buf.join(''));
 451
 452             this.mon(this.monthPicker, 'click', this.onMonthClick, this);
 453             this.mon(this.monthPicker, 'dblclick', this.onMonthDblClick, this);
 454
 455             this.mpMonths = this.monthPicker.select('td.x-date-mp-month');
 456             this.mpYears = this.monthPicker.select('td.x-date-mp-year');
 457
 458             this.mpMonths.each(function(m, a, i){
 459                 i += 1;
 460                 if((i%2) === 0){
 461                     m.dom.xmonth = 5 + Math.round(i * 0.5);
 462                 }else{
 463                     m.dom.xmonth = Math.round((i-1) * 0.5);
 464                 }
 465             });
 466         }
 467     },
 468
 469     // private
 470     showMonthPicker : function(){
 471         if(!this.disabled){
 472             this.createMonthPicker();
 473             var size = this.el.getSize();
 474             this.monthPicker.setSize(size);
 475             this.monthPicker.child('table').setSize(size);
 476
 477             this.mpSelMonth = (this.activeDate || this.value).getMonth();
 478             this.updateMPMonth(this.mpSelMonth);
 479             this.mpSelYear = (this.activeDate || this.value).getFullYear();
 480             this.updateMPYear(this.mpSelYear);
 481
 482             this.monthPicker.slideIn('t', {duration:0.2});
 483         }
 484     },
 485
 486     // private
 487     updateMPYear : function(y){
 488         this.mpyear = y;
 489         var ys = this.mpYears.elements;
 490         for(var i = 1; i <= 10; i++){
 491             var td = ys[i-1], y2;
 492             if((i%2) === 0){
 493                 y2 = y + Math.round(i * 0.5);
 494                 td.firstChild.innerHTML = y2;
 495                 td.xyear = y2;
 496             }else{
 497                 y2 = y - (5-Math.round(i * 0.5));
 498                 td.firstChild.innerHTML = y2;
 499                 td.xyear = y2;
 500             }
 501             this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel');
 502         }
 503     },
 504
 505     // private
 506     updateMPMonth : function(sm){
 507         this.mpMonths.each(function(m, a, i){
 508             m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel');
 509         });
 510     },
 511
 512     // private
 513     selectMPMonth : function(m){
 514
 515     },
 516
 517     // private
 518     onMonthClick : function(e, t){
 519         e.stopEvent();
 520         var el = new Ext.Element(t), pn;
 521         if(el.is('button.x-date-mp-cancel')){
 522             this.hideMonthPicker();
 523         }
 524         else if(el.is('button.x-date-mp-ok')){
 525             var d = new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate());
 526             if(d.getMonth() != this.mpSelMonth){
 527                 // 'fix' the JS rolling date conversion if needed
 528                 d = new Date(this.mpSelYear, this.mpSelMonth, 1).getLastDateOfMonth();
 529             }
 530             this.update(d);
 531             this.hideMonthPicker();
 532         }
 533         else if((pn = el.up('td.x-date-mp-month', 2))){
 534             this.mpMonths.removeClass('x-date-mp-sel');
 535             pn.addClass('x-date-mp-sel');
 536             this.mpSelMonth = pn.dom.xmonth;
 537         }
 538         else if((pn = el.up('td.x-date-mp-year', 2))){
 539             this.mpYears.removeClass('x-date-mp-sel');
 540             pn.addClass('x-date-mp-sel');
 541             this.mpSelYear = pn.dom.xyear;
 542         }
 543         else if(el.is('a.x-date-mp-prev')){
 544             this.updateMPYear(this.mpyear-10);
 545         }
 546         else if(el.is('a.x-date-mp-next')){
 547             this.updateMPYear(this.mpyear+10);
 548         }
 549     },
 550
 551     // private
 552     onMonthDblClick : function(e, t){
 553         e.stopEvent();
 554         var el = new Ext.Element(t), pn;
 555         if((pn = el.up('td.x-date-mp-month', 2))){
 556             this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate()));
 557             this.hideMonthPicker();
 558         }
 559         else if((pn = el.up('td.x-date-mp-year', 2))){
 560             this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
 561             this.hideMonthPicker();
 562         }
 563     },
 564
 565     // private
 566     hideMonthPicker : function(disableAnim){
 567         if(this.monthPicker){
 568             if(disableAnim === true){
 569                 this.monthPicker.hide();
 570             }else{
 571                 this.monthPicker.slideOut('t', {duration:0.2});
 572             }
 573         }
 574     },
 575
 576     // private
 577     showPrevMonth : function(e){
 578         this.update(this.activeDate.add('mo', -1));
 579     },
 580
 581     // private
 582     showNextMonth : function(e){
 583         this.update(this.activeDate.add('mo', 1));
 584     },
 585
 586     // private
 587     showPrevYear : function(){
 588         this.update(this.activeDate.add('y', -1));
 589     },
 590
 591     // private
 592     showNextYear : function(){
 593         this.update(this.activeDate.add('y', 1));
 594     },
 595
 596     // private
 597     handleMouseWheel : function(e){
 598         e.stopEvent();
 599         if(!this.disabled){
 600             var delta = e.getWheelDelta();
 601             if(delta > 0){
 602                 this.showPrevMonth();
 603             } else if(delta < 0){
 604                 this.showNextMonth();
 605             }
 606         }
 607     },
 608
 609     // private
 610     handleDateClick : function(e, t){
 611         e.stopEvent();
 612         if(!this.disabled && t.dateValue && !Ext.fly(t.parentNode).hasClass('x-date-disabled')){
 613             this.cancelFocus = this.focusOnSelect === false;
 614             this.setValue(new Date(t.dateValue));
 615             delete this.cancelFocus;
 616             this.fireEvent('select', this, this.value);
 617         }
 618     },
 619
 620     // private
 621     selectToday : function(){
 622         if(this.todayBtn && !this.todayBtn.disabled){
 623             this.setValue(new Date().clearTime());
 624             this.fireEvent('select', this, this.value);
 625         }
 626     },
 627
 628     // private
 629     update : function(date, forceRefresh){
 630         if(this.rendered){
 631                 var vd = this.activeDate, vis = this.isVisible();
 632                 this.activeDate = date;
 633                 if(!forceRefresh && vd && this.el){
 634                     var t = date.getTime();
 635                     if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
 636                         this.cells.removeClass('x-date-selected');
 637                         this.cells.each(function(c){
 638                            if(c.dom.firstChild.dateValue == t){
 639                                c.addClass('x-date-selected');
 640                                if(vis && !this.cancelFocus){
 641                                    Ext.fly(c.dom.firstChild).focus(50);
 642                                }
 643                                return false;
 644                            }
 645                         }, this);
 646                         return;
 647                     }
 648                 }
 649                 var days = date.getDaysInMonth(),
 650                     firstOfMonth = date.getFirstDateOfMonth(),
 651                     startingPos = firstOfMonth.getDay()-this.startDay;
 652
 653                 if(startingPos < 0){
 654                     startingPos += 7;
 655                 }
 656                 days += startingPos;
 657
 658                 var pm = date.add('mo', -1),
 659                     prevStart = pm.getDaysInMonth()-startingPos,
 660                     cells = this.cells.elements,
 661                     textEls = this.textNodes,
 662                     // convert everything to numbers so it's fast
 663                     day = 86400000,
 664                     d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime(),
 665                     today = new Date().clearTime().getTime(),
 666                     sel = date.clearTime(true).getTime(),
 667                     min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY,
 668                     max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY,
 669                     ddMatch = this.disabledDatesRE,
 670                     ddText = this.disabledDatesText,
 671                     ddays = this.disabledDays ? this.disabledDays.join('') : false,
 672                     ddaysText = this.disabledDaysText,
 673                     format = this.format;
 674
 675                 if(this.showToday){
 676                     var td = new Date().clearTime(),
 677                         disable = (td < min || td > max ||
 678                         (ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
 679                         (ddays && ddays.indexOf(td.getDay()) != -1));
 680
 681                     if(!this.disabled){
 682                         this.todayBtn.setDisabled(disable);
 683                         this.todayKeyListener[disable ? 'disable' : 'enable']();
 684                     }
 685                 }
 686
 687                 var setCellClass = function(cal, cell){
 688                     cell.title = '';
 689                     var t = d.getTime();
 690                     cell.firstChild.dateValue = t;
 691                     if(t == today){
 692                         cell.className += ' x-date-today';
 693                         cell.title = cal.todayText;
 694                     }
 695                     if(t == sel){
 696                         cell.className += ' x-date-selected';
 697                         if(vis){
 698                             Ext.fly(cell.firstChild).focus(50);
 699                         }
 700                     }
 701                     // disabling
 702                     if(t < min) {
 703                         cell.className = ' x-date-disabled';
 704                         cell.title = cal.minText;
 705                         return;
 706                     }
 707                     if(t > max) {
 708                         cell.className = ' x-date-disabled';
 709                         cell.title = cal.maxText;
 710                         return;
 711                     }
 712                     if(ddays){
 713                         if(ddays.indexOf(d.getDay()) != -1){
 714                             cell.title = ddaysText;
 715                             cell.className = ' x-date-disabled';
 716                         }
 717                     }
 718                     if(ddMatch && format){
 719                         var fvalue = d.dateFormat(format);
 720                         if(ddMatch.test(fvalue)){
 721                             cell.title = ddText.replace('%0', fvalue);
 722                             cell.className = ' x-date-disabled';
 723                         }
 724                     }
 725                 };
 726
 727                 var i = 0;
 728                 for(; i < startingPos; i++) {
 729                     textEls[i].innerHTML = (++prevStart);
 730                     d.setDate(d.getDate()+1);
 731                     cells[i].className = 'x-date-prevday';
 732                     setCellClass(this, cells[i]);
 733                 }
 734                 for(; i < days; i++){
 735                     var intDay = i - startingPos + 1;
 736                     textEls[i].innerHTML = (intDay);
 737                     d.setDate(d.getDate()+1);
 738                     cells[i].className = 'x-date-active';
 739                     setCellClass(this, cells[i]);
 740                 }
 741                 var extraDays = 0;
 742                 for(; i < 42; i++) {
 743                      textEls[i].innerHTML = (++extraDays);
 744                      d.setDate(d.getDate()+1);
 745                      cells[i].className = 'x-date-nextday';
 746                      setCellClass(this, cells[i]);
 747                 }
 748
 749                 this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear());
 750
 751                 if(!this.internalRender){
 752                     var main = this.el.dom.firstChild,
 753                         w = main.offsetWidth;
 754                     this.el.setWidth(w + this.el.getBorderWidth('lr'));
 755                     Ext.fly(main).setWidth(w);
 756                     this.internalRender = true;
 757                     // opera does not respect the auto grow header center column
 758                     // then, after it gets a width opera refuses to recalculate
 759                     // without a second pass
 760                     if(Ext.isOpera && !this.secondPass){
 761                         main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px';
 762                         this.secondPass = true;
 763                         this.update.defer(10, this, [date]);
 764                     }
 765                 }
 766         }
 767     },
 768
 769     // private
 770     beforeDestroy : function() {
 771         if(this.rendered){
 772             Ext.destroy(
 773                 this.keyNav,
 774                 this.monthPicker,
 775                 this.eventEl,
 776                 this.mbtn,
 777                 this.nextRepeater,
 778                 this.prevRepeater,
 779                 this.cells.el,
 780                 this.todayBtn
 781             );
 782             delete this.textNodes;
 783             delete this.cells.elements;
 784         }
 785     }
 786
 787     /**
 788      * @cfg {String} autoEl @hide
 789      */
 790 });
 791
 792 Ext.reg('datepicker', Ext.DatePicker);