src/widgets/DatePicker.js

   1 /*!
   2  * Ext JS Library 3.2.1
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   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     // default value used to initialise each date in the DatePicker
 156     // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
 157     initHour: 12, // 24-hour format
 158
 159     // private
 160     initComponent : function(){
 161         Ext.DatePicker.superclass.initComponent.call(this);
 162
 163         this.value = this.value ?
 164                  this.value.clearTime(true) : new Date().clearTime();
 165
 166         this.addEvents(
 167             /**
 168              * @event select
 169              * Fires when a date is selected
 170              * @param {DatePicker} this DatePicker
 171              * @param {Date} date The selected date
 172              */
 173             'select'
 174         );
 175
 176         if(this.handler){
 177             this.on('select', this.handler,  this.scope || this);
 178         }
 179
 180         this.initDisabledDays();
 181     },
 182
 183     // private
 184     initDisabledDays : function(){
 185         if(!this.disabledDatesRE && this.disabledDates){
 186             var dd = this.disabledDates,
 187                 len = dd.length - 1,
 188                 re = '(?:';
 189
 190             Ext.each(dd, function(d, i){
 191                 re += Ext.isDate(d) ? '^' + Ext.escapeRe(d.dateFormat(this.format)) + '$' : dd[i];
 192                 if(i != len){
 193                     re += '|';
 194                 }
 195             }, this);
 196             this.disabledDatesRE = new RegExp(re + ')');
 197         }
 198     },
 199
 200     /**
 201      * Replaces any existing disabled dates with new values and refreshes the DatePicker.
 202      * @param {Array/RegExp} disabledDates An array of date strings (see the {@link #disabledDates} config
 203      * for details on supported values), or a JavaScript regular expression used to disable a pattern of dates.
 204      */
 205     setDisabledDates : function(dd){
 206         if(Ext.isArray(dd)){
 207             this.disabledDates = dd;
 208             this.disabledDatesRE = null;
 209         }else{
 210             this.disabledDatesRE = dd;
 211         }
 212         this.initDisabledDays();
 213         this.update(this.value, true);
 214     },
 215
 216     /**
 217      * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
 218      * @param {Array} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config
 219      * for details on supported values.
 220      */
 221     setDisabledDays : function(dd){
 222         this.disabledDays = dd;
 223         this.update(this.value, true);
 224     },
 225
 226     /**
 227      * Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker.
 228      * @param {Date} value The minimum date that can be selected
 229      */
 230     setMinDate : function(dt){
 231         this.minDate = dt;
 232         this.update(this.value, true);
 233     },
 234
 235     /**
 236      * Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker.
 237      * @param {Date} value The maximum date that can be selected
 238      */
 239     setMaxDate : function(dt){
 240         this.maxDate = dt;
 241         this.update(this.value, true);
 242     },
 243
 244     /**
 245      * Sets the value of the date field
 246      * @param {Date} value The date to set
 247      */
 248     setValue : function(value){
 249         this.value = value.clearTime(true);
 250         this.update(this.value);
 251     },
 252
 253     /**
 254      * Gets the current selected value of the date field
 255      * @return {Date} The selected date
 256      */
 257     getValue : function(){
 258         return this.value;
 259     },
 260
 261     // private
 262     focus : function(){
 263         this.update(this.activeDate);
 264     },
 265
 266     // private
 267     onEnable: function(initial){
 268         Ext.DatePicker.superclass.onEnable.call(this);
 269         this.doDisabled(false);
 270         this.update(initial ? this.value : this.activeDate);
 271         if(Ext.isIE){
 272             this.el.repaint();
 273         }
 274
 275     },
 276
 277     // private
 278     onDisable : function(){
 279         Ext.DatePicker.superclass.onDisable.call(this);
 280         this.doDisabled(true);
 281         if(Ext.isIE && !Ext.isIE8){
 282             /* Really strange problem in IE6/7, when disabled, have to explicitly
 283              * repaint each of the nodes to get them to display correctly, simply
 284              * calling repaint on the main element doesn't appear to be enough.
 285              */
 286              Ext.each([].concat(this.textNodes, this.el.query('th span')), function(el){
 287                  Ext.fly(el).repaint();
 288              });
 289         }
 290     },
 291
 292     // private
 293     doDisabled : function(disabled){
 294         this.keyNav.setDisabled(disabled);
 295         this.prevRepeater.setDisabled(disabled);
 296         this.nextRepeater.setDisabled(disabled);
 297         if(this.showToday){
 298             this.todayKeyListener.setDisabled(disabled);
 299             this.todayBtn.setDisabled(disabled);
 300         }
 301     },
 302
 303     // private
 304     onRender : function(container, position){
 305         var m = [
 306              '<table cellspacing="0">',
 307                 '<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>',
 308                 '<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'],
 309                 dn = this.dayNames,
 310                 i;
 311         for(i = 0; i < 7; i++){
 312             var d = this.startDay+i;
 313             if(d > 6){
 314                 d = d-7;
 315             }
 316             m.push('<th><span>', dn[d].substr(0,1), '</span></th>');
 317         }
 318         m[m.length] = '</tr></thead><tbody><tr>';
 319         for(i = 0; i < 42; i++) {
 320             if(i % 7 === 0 && i !== 0){
 321                 m[m.length] = '</tr><tr>';
 322             }
 323             m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>';
 324         }
 325         m.push('</tr></tbody></table></td></tr>',
 326                 this.showToday ? '<tr><td colspan="3" class="x-date-bottom" align="center"></td></tr>' : '',
 327                 '</table><div class="x-date-mp"></div>');
 328
 329         var el = document.createElement('div');
 330         el.className = 'x-date-picker';
 331         el.innerHTML = m.join('');
 332
 333         container.dom.insertBefore(el, position);
 334
 335         this.el = Ext.get(el);
 336         this.eventEl = Ext.get(el.firstChild);
 337
 338         this.prevRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-left a'), {
 339             handler: this.showPrevMonth,
 340             scope: this,
 341             preventDefault:true,
 342             stopDefault:true
 343         });
 344
 345         this.nextRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-right a'), {
 346             handler: this.showNextMonth,
 347             scope: this,
 348             preventDefault:true,
 349             stopDefault:true
 350         });
 351
 352         this.monthPicker = this.el.down('div.x-date-mp');
 353         this.monthPicker.enableDisplayMode('block');
 354
 355         this.keyNav = new Ext.KeyNav(this.eventEl, {
 356             'left' : function(e){
 357                 if(e.ctrlKey){
 358                     this.showPrevMonth();
 359                 }else{
 360                     this.update(this.activeDate.add('d', -1));
 361                 }
 362             },
 363
 364             'right' : function(e){
 365                 if(e.ctrlKey){
 366                     this.showNextMonth();
 367                 }else{
 368                     this.update(this.activeDate.add('d', 1));
 369                 }
 370             },
 371
 372             'up' : function(e){
 373                 if(e.ctrlKey){
 374                     this.showNextYear();
 375                 }else{
 376                     this.update(this.activeDate.add('d', -7));
 377                 }
 378             },
 379
 380             'down' : function(e){
 381                 if(e.ctrlKey){
 382                     this.showPrevYear();
 383                 }else{
 384                     this.update(this.activeDate.add('d', 7));
 385                 }
 386             },
 387
 388             'pageUp' : function(e){
 389                 this.showNextMonth();
 390             },
 391
 392             'pageDown' : function(e){
 393                 this.showPrevMonth();
 394             },
 395
 396             'enter' : function(e){
 397                 e.stopPropagation();
 398                 return true;
 399             },
 400
 401             scope : this
 402         });
 403
 404         this.el.unselectable();
 405
 406         this.cells = this.el.select('table.x-date-inner tbody td');
 407         this.textNodes = this.el.query('table.x-date-inner tbody span');
 408
 409         this.mbtn = new Ext.Button({
 410             text: '&#160;',
 411             tooltip: this.monthYearText,
 412             renderTo: this.el.child('td.x-date-middle', true)
 413         });
 414         this.mbtn.el.child('em').addClass('x-btn-arrow');
 415
 416         if(this.showToday){
 417             this.todayKeyListener = this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday,  this);
 418             var today = (new Date()).dateFormat(this.format);
 419             this.todayBtn = new Ext.Button({
 420                 renderTo: this.el.child('td.x-date-bottom', true),
 421                 text: String.format(this.todayText, today),
 422                 tooltip: String.format(this.todayTip, today),
 423                 handler: this.selectToday,
 424                 scope: this
 425             });
 426         }
 427         this.mon(this.eventEl, 'mousewheel', this.handleMouseWheel, this);
 428         this.mon(this.eventEl, 'click', this.handleDateClick,  this, {delegate: 'a.x-date-date'});
 429         this.mon(this.mbtn, 'click', this.showMonthPicker, this);
 430         this.onEnable(true);
 431     },
 432
 433     // private
 434     createMonthPicker : function(){
 435         if(!this.monthPicker.dom.firstChild){
 436             var buf = ['<table border="0" cellspacing="0">'];
 437             for(var i = 0; i < 6; i++){
 438                 buf.push(
 439                     '<tr><td class="x-date-mp-month"><a href="#">', Date.getShortMonthName(i), '</a></td>',
 440                     '<td class="x-date-mp-month x-date-mp-sep"><a href="#">', Date.getShortMonthName(i + 6), '</a></td>',
 441                     i === 0 ?
 442                     '<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>' :
 443                     '<td class="x-date-mp-year"><a href="#"></a></td><td class="x-date-mp-year"><a href="#"></a></td></tr>'
 444                 );
 445             }
 446             buf.push(
 447                 '<tr class="x-date-mp-btns"><td colspan="4"><button type="button" class="x-date-mp-ok">',
 448                     this.okText,
 449                     '</button><button type="button" class="x-date-mp-cancel">',
 450                     this.cancelText,
 451                     '</button></td></tr>',
 452                 '</table>'
 453             );
 454             this.monthPicker.update(buf.join(''));
 455
 456             this.mon(this.monthPicker, 'click', this.onMonthClick, this);
 457             this.mon(this.monthPicker, 'dblclick', this.onMonthDblClick, this);
 458
 459             this.mpMonths = this.monthPicker.select('td.x-date-mp-month');
 460             this.mpYears = this.monthPicker.select('td.x-date-mp-year');
 461
 462             this.mpMonths.each(function(m, a, i){
 463                 i += 1;
 464                 if((i%2) === 0){
 465                     m.dom.xmonth = 5 + Math.round(i * 0.5);
 466                 }else{
 467                     m.dom.xmonth = Math.round((i-1) * 0.5);
 468                 }
 469             });
 470         }
 471     },
 472
 473     // private
 474     showMonthPicker : function(){
 475         if(!this.disabled){
 476             this.createMonthPicker();
 477             var size = this.el.getSize();
 478             this.monthPicker.setSize(size);
 479             this.monthPicker.child('table').setSize(size);
 480
 481             this.mpSelMonth = (this.activeDate || this.value).getMonth();
 482             this.updateMPMonth(this.mpSelMonth);
 483             this.mpSelYear = (this.activeDate || this.value).getFullYear();
 484             this.updateMPYear(this.mpSelYear);
 485
 486             this.monthPicker.slideIn('t', {duration:0.2});
 487         }
 488     },
 489
 490     // private
 491     updateMPYear : function(y){
 492         this.mpyear = y;
 493         var ys = this.mpYears.elements;
 494         for(var i = 1; i <= 10; i++){
 495             var td = ys[i-1], y2;
 496             if((i%2) === 0){
 497                 y2 = y + Math.round(i * 0.5);
 498                 td.firstChild.innerHTML = y2;
 499                 td.xyear = y2;
 500             }else{
 501                 y2 = y - (5-Math.round(i * 0.5));
 502                 td.firstChild.innerHTML = y2;
 503                 td.xyear = y2;
 504             }
 505             this.mpYears.item(i-1)[y2 == this.mpSelYear ? 'addClass' : 'removeClass']('x-date-mp-sel');
 506         }
 507     },
 508
 509     // private
 510     updateMPMonth : function(sm){
 511         this.mpMonths.each(function(m, a, i){
 512             m[m.dom.xmonth == sm ? 'addClass' : 'removeClass']('x-date-mp-sel');
 513         });
 514     },
 515
 516     // private
 517     selectMPMonth : function(m){
 518
 519     },
 520
 521     // private
 522     onMonthClick : function(e, t){
 523         e.stopEvent();
 524         var el = new Ext.Element(t), pn;
 525         if(el.is('button.x-date-mp-cancel')){
 526             this.hideMonthPicker();
 527         }
 528         else if(el.is('button.x-date-mp-ok')){
 529             var d = new Date(this.mpSelYear, this.mpSelMonth, (this.activeDate || this.value).getDate());
 530             if(d.getMonth() != this.mpSelMonth){
 531                 // 'fix' the JS rolling date conversion if needed
 532                 d = new Date(this.mpSelYear, this.mpSelMonth, 1).getLastDateOfMonth();
 533             }
 534             this.update(d);
 535             this.hideMonthPicker();
 536         }
 537         else if((pn = el.up('td.x-date-mp-month', 2))){
 538             this.mpMonths.removeClass('x-date-mp-sel');
 539             pn.addClass('x-date-mp-sel');
 540             this.mpSelMonth = pn.dom.xmonth;
 541         }
 542         else if((pn = el.up('td.x-date-mp-year', 2))){
 543             this.mpYears.removeClass('x-date-mp-sel');
 544             pn.addClass('x-date-mp-sel');
 545             this.mpSelYear = pn.dom.xyear;
 546         }
 547         else if(el.is('a.x-date-mp-prev')){
 548             this.updateMPYear(this.mpyear-10);
 549         }
 550         else if(el.is('a.x-date-mp-next')){
 551             this.updateMPYear(this.mpyear+10);
 552         }
 553     },
 554
 555     // private
 556     onMonthDblClick : function(e, t){
 557         e.stopEvent();
 558         var el = new Ext.Element(t), pn;
 559         if((pn = el.up('td.x-date-mp-month', 2))){
 560             this.update(new Date(this.mpSelYear, pn.dom.xmonth, (this.activeDate || this.value).getDate()));
 561             this.hideMonthPicker();
 562         }
 563         else if((pn = el.up('td.x-date-mp-year', 2))){
 564             this.update(new Date(pn.dom.xyear, this.mpSelMonth, (this.activeDate || this.value).getDate()));
 565             this.hideMonthPicker();
 566         }
 567     },
 568
 569     // private
 570     hideMonthPicker : function(disableAnim){
 571         if(this.monthPicker){
 572             if(disableAnim === true){
 573                 this.monthPicker.hide();
 574             }else{
 575                 this.monthPicker.slideOut('t', {duration:0.2});
 576             }
 577         }
 578     },
 579
 580     // private
 581     showPrevMonth : function(e){
 582         this.update(this.activeDate.add('mo', -1));
 583     },
 584
 585     // private
 586     showNextMonth : function(e){
 587         this.update(this.activeDate.add('mo', 1));
 588     },
 589
 590     // private
 591     showPrevYear : function(){
 592         this.update(this.activeDate.add('y', -1));
 593     },
 594
 595     // private
 596     showNextYear : function(){
 597         this.update(this.activeDate.add('y', 1));
 598     },
 599
 600     // private
 601     handleMouseWheel : function(e){
 602         e.stopEvent();
 603         if(!this.disabled){
 604             var delta = e.getWheelDelta();
 605             if(delta > 0){
 606                 this.showPrevMonth();
 607             } else if(delta < 0){
 608                 this.showNextMonth();
 609             }
 610         }
 611     },
 612
 613     // private
 614     handleDateClick : function(e, t){
 615         e.stopEvent();
 616         if(!this.disabled && t.dateValue && !Ext.fly(t.parentNode).hasClass('x-date-disabled')){
 617             this.cancelFocus = this.focusOnSelect === false;
 618             this.setValue(new Date(t.dateValue));
 619             delete this.cancelFocus;
 620             this.fireEvent('select', this, this.value);
 621         }
 622     },
 623
 624     // private
 625     selectToday : function(){
 626         if(this.todayBtn && !this.todayBtn.disabled){
 627             this.setValue(new Date().clearTime());
 628             this.fireEvent('select', this, this.value);
 629         }
 630     },
 631
 632     // private
 633     update : function(date, forceRefresh){
 634         if(this.rendered){
 635             var vd = this.activeDate, vis = this.isVisible();
 636             this.activeDate = date;
 637             if(!forceRefresh && vd && this.el){
 638                 var t = date.getTime();
 639                 if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
 640                     this.cells.removeClass('x-date-selected');
 641                     this.cells.each(function(c){
 642                        if(c.dom.firstChild.dateValue == t){
 643                            c.addClass('x-date-selected');
 644                            if(vis && !this.cancelFocus){
 645                                Ext.fly(c.dom.firstChild).focus(50);
 646                            }
 647                            return false;
 648                        }
 649                     }, this);
 650                     return;
 651                 }
 652             }
 653             var days = date.getDaysInMonth(),
 654                 firstOfMonth = date.getFirstDateOfMonth(),
 655                 startingPos = firstOfMonth.getDay()-this.startDay;
 656
 657             if(startingPos < 0){
 658                 startingPos += 7;
 659             }
 660             days += startingPos;
 661
 662             var pm = date.add('mo', -1),
 663                 prevStart = pm.getDaysInMonth()-startingPos,
 664                 cells = this.cells.elements,
 665                 textEls = this.textNodes,
 666                 // convert everything to numbers so it's fast
 667                 d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart, this.initHour)),
 668                 today = new Date().clearTime().getTime(),
 669                 sel = date.clearTime(true).getTime(),
 670                 min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY,
 671                 max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY,
 672                 ddMatch = this.disabledDatesRE,
 673                 ddText = this.disabledDatesText,
 674                 ddays = this.disabledDays ? this.disabledDays.join('') : false,
 675                 ddaysText = this.disabledDaysText,
 676                 format = this.format;
 677
 678             if(this.showToday){
 679                 var td = new Date().clearTime(),
 680                     disable = (td < min || td > max ||
 681                     (ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
 682                     (ddays && ddays.indexOf(td.getDay()) != -1));
 683
 684                 if(!this.disabled){
 685                     this.todayBtn.setDisabled(disable);
 686                     this.todayKeyListener[disable ? 'disable' : 'enable']();
 687                 }
 688             }
 689
 690             var setCellClass = function(cal, cell){
 691                 cell.title = '';
 692                 var t = d.clearTime(true).getTime();
 693                 cell.firstChild.dateValue = t;
 694                 if(t == today){
 695                     cell.className += ' x-date-today';
 696                     cell.title = cal.todayText;
 697                 }
 698                 if(t == sel){
 699                     cell.className += ' x-date-selected';
 700                     if(vis){
 701                         Ext.fly(cell.firstChild).focus(50);
 702                     }
 703                 }
 704                 // disabling
 705                 if(t < min) {
 706                     cell.className = ' x-date-disabled';
 707                     cell.title = cal.minText;
 708                     return;
 709                 }
 710                 if(t > max) {
 711                     cell.className = ' x-date-disabled';
 712                     cell.title = cal.maxText;
 713                     return;
 714                 }
 715                 if(ddays){
 716                     if(ddays.indexOf(d.getDay()) != -1){
 717                         cell.title = ddaysText;
 718                         cell.className = ' x-date-disabled';
 719                     }
 720                 }
 721                 if(ddMatch && format){
 722                     var fvalue = d.dateFormat(format);
 723                     if(ddMatch.test(fvalue)){
 724                         cell.title = ddText.replace('%0', fvalue);
 725                         cell.className = ' x-date-disabled';
 726                     }
 727                 }
 728             };
 729
 730             var i = 0;
 731             for(; i < startingPos; i++) {
 732                 textEls[i].innerHTML = (++prevStart);
 733                 d.setDate(d.getDate()+1);
 734                 cells[i].className = 'x-date-prevday';
 735                 setCellClass(this, cells[i]);
 736             }
 737             for(; i < days; i++){
 738                 var intDay = i - startingPos + 1;
 739                 textEls[i].innerHTML = (intDay);
 740                 d.setDate(d.getDate()+1);
 741                 cells[i].className = 'x-date-active';
 742                 setCellClass(this, cells[i]);
 743             }
 744             var extraDays = 0;
 745             for(; i < 42; i++) {
 746                  textEls[i].innerHTML = (++extraDays);
 747                  d.setDate(d.getDate()+1);
 748                  cells[i].className = 'x-date-nextday';
 749                  setCellClass(this, cells[i]);
 750             }
 751
 752             this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear());
 753
 754             if(!this.internalRender){
 755                 var main = this.el.dom.firstChild,
 756                     w = main.offsetWidth;
 757                 this.el.setWidth(w + this.el.getBorderWidth('lr'));
 758                 Ext.fly(main).setWidth(w);
 759                 this.internalRender = true;
 760                 // opera does not respect the auto grow header center column
 761                 // then, after it gets a width opera refuses to recalculate
 762                 // without a second pass
 763                 if(Ext.isOpera && !this.secondPass){
 764                     main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px';
 765                     this.secondPass = true;
 766                     this.update.defer(10, this, [date]);
 767                 }
 768             }
 769         }
 770     },
 771
 772     // private
 773     beforeDestroy : function() {
 774         if(this.rendered){
 775             Ext.destroy(
 776                 this.keyNav,
 777                 this.monthPicker,
 778                 this.eventEl,
 779                 this.mbtn,
 780                 this.nextRepeater,
 781                 this.prevRepeater,
 782                 this.cells.el,
 783                 this.todayBtn
 784             );
 785             delete this.textNodes;
 786             delete this.cells.elements;
 787         }
 788     }
 789
 790     /**
 791      * @cfg {String} autoEl @hide
 792      */
 793 });
 794
 795 Ext.reg('datepicker', Ext.DatePicker);