src/widgets/DatePicker.js

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