docs/source/DatePicker.html

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