docs/source/DatePicker.html

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