src/picker/Date.js

   1 /**
   2  * @class Ext.picker.Date
   3  * @extends Ext.Component
   4  * <p>A date picker. This class is used by the {@link Ext.form.field.Date} field to allow browsing and
   5  * selection of valid dates in a popup next to the field, but may also be used with other components.</p>
   6  * <p>Typically you will need to implement a handler function to be notified when the user chooses a color from the
   7  * picker; you can register the handler using the {@link #select} event, or by implementing the {@link #handler}
   8  * method.</p>
   9  * <p>By default the user will be allowed to pick any date; this can be changed by using the {@link #minDate},
  10  * {@link #maxDate}, {@link #disabledDays}, {@link #disabledDatesRE}, and/or {@link #disabledDates} configs.</p>
  11  * <p>All the string values documented below may be overridden by including an Ext locale file in your page.</p>
  12  * <p>Example usage:</p>
  13  * <pre><code>new Ext.panel.Panel({
  14     title: 'Choose a future date:',
  15     width: 200,
  16     bodyPadding: 10,
  17     renderTo: Ext.getBody(),
  18     items: [{
  19         xtype: 'datepicker',
  20         minDate: new Date(),
  21         handler: function(picker, date) {
  22             // do something with the selected date
  23         }
  24     }]
  25 });</code></pre>
  26  * {@img Ext.picker.Date/Ext.picker.Date.png Ext.picker.Date component}
  27  *
  28  * @constructor
  29  * Create a new DatePicker
  30  * @param {Object} config The config object
  31  *
  32  * @xtype datepicker
  33  */
  34 Ext.define('Ext.picker.Date', {
  35     extend: 'Ext.Component',
  36     requires: [
  37         'Ext.XTemplate',
  38         'Ext.button.Button',
  39         'Ext.button.Split',
  40         'Ext.util.ClickRepeater',
  41         'Ext.util.KeyNav',
  42         'Ext.EventObject',
  43         'Ext.fx.Manager',
  44         'Ext.picker.Month'
  45     ],
  46     alias: 'widget.datepicker',
  47     alternateClassName: 'Ext.DatePicker',
  48
  49     renderTpl: [
  50         '<div class="{cls}" id="{id}" role="grid" title="{ariaTitle} {value:this.longDay}">',
  51             '<div role="presentation" class="{baseCls}-header">',
  52                 '<div class="{baseCls}-prev"><a href="#" role="button" title="{prevText}"></a></div>',
  53                 '<div class="{baseCls}-month"></div>',
  54                 '<div class="{baseCls}-next"><a href="#" role="button" title="{nextText}"></a></div>',
  55             '</div>',
  56             '<table class="{baseCls}-inner" cellspacing="0" role="presentation">',
  57                 '<thead role="presentation"><tr role="presentation">',
  58                     '<tpl for="dayNames">',
  59                         '<th role="columnheader" title="{.}"><span>{.:this.firstInitial}</span></th>',
  60                     '</tpl>',
  61                 '</tr></thead>',
  62                 '<tbody role="presentation"><tr role="presentation">',
  63                     '<tpl for="days">',
  64                         '{#:this.isEndOfWeek}',
  65                         '<td role="gridcell" id="{[Ext.id()]}">',
  66                             '<a role="presentation" href="#" hidefocus="on" class="{parent.baseCls}-date" tabIndex="1">',
  67                                 '<em role="presentation"><span role="presentation"></span></em>',
  68                             '</a>',
  69                         '</td>',
  70                     '</tpl>',
  71                 '</tr></tbody>',
  72             '</table>',
  73             '<tpl if="showToday">',
  74                 '<div role="presentation" class="{baseCls}-footer"></div>',
  75             '</tpl>',
  76         '</div>',
  77         {
  78             firstInitial: function(value) {
  79                 return value.substr(0,1);
  80             },
  81             isEndOfWeek: function(value) {
  82                 // convert from 1 based index to 0 based
  83                 // by decrementing value once.
  84                 value--;
  85                 var end = value % 7 === 0 && value !== 0;
  86                 return end ? '</tr><tr role="row">' : '';
  87             },
  88             longDay: function(value){
  89                 return Ext.Date.format(value, this.longDayFormat);
  90             }
  91         }
  92     ],
  93
  94     ariaTitle: 'Date Picker',
  95     /**
  96      * @cfg {String} todayText
  97      * The text to display on the button that selects the current date (defaults to <code>'Today'</code>)
  98      */
  99     todayText : 'Today',
 100     /**
 101      * @cfg {Function} handler
 102      * Optional. A function that will handle the select event of this picker.
 103      * The handler is passed the following parameters:<div class="mdetail-params"><ul>
 104      * <li><code>picker</code> : Ext.picker.Date <div class="sub-desc">This Date picker.</div></li>
 105      * <li><code>date</code> : Date <div class="sub-desc">The selected date.</div></li>
 106      * </ul></div>
 107      */
 108     /**
 109      * @cfg {Object} scope
 110      * The scope (<code><b>this</b></code> reference) in which the <code>{@link #handler}</code>
 111      * function will be called.  Defaults to this DatePicker instance.
 112      */
 113     /**
 114      * @cfg {String} todayTip
 115      * A string used to format the message for displaying in a tooltip over the button that
 116      * selects the current date. Defaults to <code>'{0} (Spacebar)'</code> where
 117      * the <code>{0}</code> token is replaced by today's date.
 118      */
 119     todayTip : '{0} (Spacebar)',
 120     /**
 121      * @cfg {String} minText
 122      * The error text to display if the minDate validation fails (defaults to <code>'This date is before the minimum date'</code>)
 123      */
 124     minText : 'This date is before the minimum date',
 125     /**
 126      * @cfg {String} maxText
 127      * The error text to display if the maxDate validation fails (defaults to <code>'This date is after the maximum date'</code>)
 128      */
 129     maxText : 'This date is after the maximum date',
 130     /**
 131      * @cfg {String} format
 132      * The default date format string which can be overriden for localization support.  The format must be
 133      * valid according to {@link Ext.Date#parse} (defaults to {@link Ext.Date#defaultFormat}).
 134      */
 135     /**
 136      * @cfg {String} disabledDaysText
 137      * The tooltip to display when the date falls on a disabled day (defaults to <code>'Disabled'</code>)
 138      */
 139     disabledDaysText : 'Disabled',
 140     /**
 141      * @cfg {String} disabledDatesText
 142      * The tooltip text to display when the date falls on a disabled date (defaults to <code>'Disabled'</code>)
 143      */
 144     disabledDatesText : 'Disabled',
 145     /**
 146      * @cfg {Array} monthNames
 147      * An array of textual month names which can be overriden for localization support (defaults to Ext.Date.monthNames)
 148      */
 149     /**
 150      * @cfg {Array} dayNames
 151      * An array of textual day names which can be overriden for localization support (defaults to Ext.Date.dayNames)
 152      */
 153     /**
 154      * @cfg {String} nextText
 155      * The next month navigation button tooltip (defaults to <code>'Next Month (Control+Right)'</code>)
 156      */
 157     nextText : 'Next Month (Control+Right)',
 158     /**
 159      * @cfg {String} prevText
 160      * The previous month navigation button tooltip (defaults to <code>'Previous Month (Control+Left)'</code>)
 161      */
 162     prevText : 'Previous Month (Control+Left)',
 163     /**
 164      * @cfg {String} monthYearText
 165      * The header month selector tooltip (defaults to <code>'Choose a month (Control+Up/Down to move years)'</code>)
 166      */
 167     monthYearText : 'Choose a month (Control+Up/Down to move years)',
 168     /**
 169      * @cfg {Number} startDay
 170      * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
 171      */
 172     startDay : 0,
 173     /**
 174      * @cfg {Boolean} showToday
 175      * False to hide the footer area containing the Today button and disable the keyboard handler for spacebar
 176      * that selects the current date (defaults to <code>true</code>).
 177      */
 178     showToday : true,
 179     /**
 180      * @cfg {Date} minDate
 181      * Minimum allowable date (JavaScript date object, defaults to null)
 182      */
 183     /**
 184      * @cfg {Date} maxDate
 185      * Maximum allowable date (JavaScript date object, defaults to null)
 186      */
 187     /**
 188      * @cfg {Array} disabledDays
 189      * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
 190      */
 191     /**
 192      * @cfg {RegExp} disabledDatesRE
 193      * JavaScript regular expression used to disable a pattern of dates (defaults to null).  The {@link #disabledDates}
 194      * config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the
 195      * disabledDates value.
 196      */
 197     /**
 198      * @cfg {Array} disabledDates
 199      * An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular
 200      * expression so they are very powerful. Some examples:
 201      * <ul>
 202      * <li>['03/08/2003', '09/16/2003'] would disable those exact dates</li>
 203      * <li>['03/08', '09/16'] would disable those days for every year</li>
 204      * <li>['^03/08'] would only match the beginning (useful if you are using short years)</li>
 205      * <li>['03/../2006'] would disable every day in March 2006</li>
 206      * <li>['^03'] would disable every day in every March</li>
 207      * </ul>
 208      * Note that the format of the dates included in the array should exactly match the {@link #format} config.
 209      * In order to support regular expressions, if you are using a date format that has '.' in it, you will have to
 210      * escape the dot when restricting dates. For example: ['03\\.08\\.03'].
 211      */
 212
 213     /**
 214      * @cfg {Boolean} disableAnim True to disable animations when showing the month picker. Defaults to <tt>false</tt>.
 215      */
 216     disableAnim: true,
 217
 218     /**
 219      * @cfg {String} baseCls
 220      * The base CSS class to apply to this components element (defaults to <tt>'x-datepicker'</tt>).
 221      */
 222     baseCls: Ext.baseCSSPrefix + 'datepicker',
 223
 224     /**
 225      * @cfg {String} selectedCls
 226      * The class to apply to the selected cell. Defaults to <tt>'x-datepicker-selected'</tt>
 227      */
 228
 229     /**
 230      * @cfg {String} disabledCellCls
 231      * The class to apply to disabled cells. Defaults to <tt>'x-datepicker-disabled'</tt>
 232      */
 233
 234     /**
 235      * @cfg {String} longDayFormat
 236      * The format for displaying a date in a longer format. Defaults to <tt>'F d, Y'</tt>
 237      */
 238     longDayFormat: 'F d, Y',
 239
 240     /**
 241      * @cfg {Object} keyNavConfig Specifies optional custom key event handlers for the {@link Ext.util.KeyNav}
 242      * attached to this date picker. Must conform to the config format recognized by the {@link Ext.util.KeyNav}
 243      * constructor. Handlers specified in this object will replace default handlers of the same name.
 244      */
 245
 246     /**
 247      * @cfg {Boolean} focusOnShow
 248      * True to automatically focus the picker on show. Defaults to <tt>false</tt>.
 249      */
 250     focusOnShow: false,
 251
 252     // private
 253     // Set by other components to stop the picker focus being updated when the value changes.
 254     focusOnSelect: true,
 255
 256     width: 178,
 257
 258     // default value used to initialise each date in the DatePicker
 259     // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
 260     initHour: 12, // 24-hour format
 261
 262     numDays: 42,
 263
 264     // private, inherit docs
 265     initComponent : function() {
 266         var me = this,
 267             clearTime = Ext.Date.clearTime;
 268
 269         me.selectedCls = me.baseCls + '-selected';
 270         me.disabledCellCls = me.baseCls + '-disabled';
 271         me.prevCls = me.baseCls + '-prevday';
 272         me.activeCls = me.baseCls + '-active';
 273         me.nextCls = me.baseCls + '-prevday';
 274         me.todayCls = me.baseCls + '-today';
 275         me.dayNames = me.dayNames.slice(me.startDay).concat(me.dayNames.slice(0, me.startDay));
 276         this.callParent();
 277
 278         me.value = me.value ?
 279                  clearTime(me.value, true) : clearTime(new Date());
 280
 281         me.addEvents(
 282             /**
 283              * @event select
 284              * Fires when a date is selected
 285              * @param {DatePicker} this DatePicker
 286              * @param {Date} date The selected date
 287              */
 288             'select'
 289         );
 290
 291         me.initDisabledDays();
 292     },
 293
 294     // private, inherit docs
 295     onRender : function(container, position){
 296         /*
 297          * days array for looping through 6 full weeks (6 weeks * 7 days)
 298          * Note that we explicitly force the size here so the template creates
 299          * all the appropriate cells.
 300          */
 301
 302         var me = this,
 303             days = new Array(me.numDays),
 304             today = Ext.Date.format(new Date(), me.format);
 305
 306         Ext.applyIf(me, {
 307             renderData: {},
 308             renderSelectors: {}
 309         });
 310
 311         Ext.apply(me.renderData, {
 312             dayNames: me.dayNames,
 313             ariaTitle: me.ariaTitle,
 314             value: me.value,
 315             showToday: me.showToday,
 316             prevText: me.prevText,
 317             nextText: me.nextText,
 318             days: days
 319         });
 320         me.getTpl('renderTpl').longDayFormat = me.longDayFormat;
 321
 322         Ext.apply(me.renderSelectors, {
 323             eventEl: 'table.' + me.baseCls + '-inner',
 324             prevEl: '.' + me.baseCls + '-prev a',
 325             nextEl: '.' + me.baseCls + '-next a',
 326             middleBtnEl: '.' + me.baseCls + '-month',
 327             footerEl: '.' + me.baseCls + '-footer'
 328         });
 329
 330         this.callParent(arguments);
 331         me.el.unselectable();
 332
 333         me.cells = me.eventEl.select('tbody td');
 334         me.textNodes = me.eventEl.query('tbody td span');
 335
 336         me.monthBtn = Ext.create('Ext.button.Split', {
 337             text: '',
 338             tooltip: me.monthYearText,
 339             renderTo: me.middleBtnEl
 340         });
 341         //~ me.middleBtnEl.down('button').addCls(Ext.baseCSSPrefix + 'btn-arrow');
 342
 343
 344         me.todayBtn = Ext.create('Ext.button.Button', {
 345             renderTo: me.footerEl,
 346             text: Ext.String.format(me.todayText, today),
 347             tooltip: Ext.String.format(me.todayTip, today),
 348             handler: me.selectToday,
 349             scope: me
 350         });
 351     },
 352
 353     // private, inherit docs
 354     initEvents: function(){
 355         var me = this,
 356             eDate = Ext.Date,
 357             day = eDate.DAY;
 358
 359         this.callParent();
 360
 361         me.prevRepeater = Ext.create('Ext.util.ClickRepeater', me.prevEl, {
 362             handler: me.showPrevMonth,
 363             scope: me,
 364             preventDefault: true,
 365             stopDefault: true
 366         });
 367
 368         me.nextRepeater = Ext.create('Ext.util.ClickRepeater', me.nextEl, {
 369             handler: me.showNextMonth,
 370             scope: me,
 371             preventDefault:true,
 372             stopDefault:true
 373         });
 374
 375         me.keyNav = Ext.create('Ext.util.KeyNav', me.eventEl, Ext.apply({
 376             scope: me,
 377             'left' : function(e){
 378                 if(e.ctrlKey){
 379                     me.showPrevMonth();
 380                 }else{
 381                     me.update(eDate.add(me.activeDate, day, -1));
 382                 }
 383             },
 384
 385             'right' : function(e){
 386                 if(e.ctrlKey){
 387                     me.showNextMonth();
 388                 }else{
 389                     me.update(eDate.add(me.activeDate, day, 1));
 390                 }
 391             },
 392
 393             'up' : function(e){
 394                 if(e.ctrlKey){
 395                     me.showNextYear();
 396                 }else{
 397                     me.update(eDate.add(me.activeDate, day, -7));
 398                 }
 399             },
 400
 401             'down' : function(e){
 402                 if(e.ctrlKey){
 403                     me.showPrevYear();
 404                 }else{
 405                     me.update(eDate.add(me.activeDate, day, 7));
 406                 }
 407             },
 408             'pageUp' : me.showNextMonth,
 409             'pageDown' : me.showPrevMonth,
 410             'enter' : function(e){
 411                 e.stopPropagation();
 412                 return true;
 413             }
 414         }, me.keyNavConfig));
 415
 416         if(me.showToday){
 417             me.todayKeyListener = me.eventEl.addKeyListener(Ext.EventObject.SPACE, me.selectToday,  me);
 418         }
 419         me.mon(me.eventEl, 'mousewheel', me.handleMouseWheel, me);
 420         me.mon(me.eventEl, 'click', me.handleDateClick,  me, {delegate: 'a.' + me.baseCls + '-date'});
 421         me.mon(me.monthBtn, 'click', me.showMonthPicker, me);
 422         me.mon(me.monthBtn, 'arrowclick', me.showMonthPicker, me);
 423         me.update(me.value);
 424     },
 425
 426     /**
 427      * Setup the disabled dates regex based on config options
 428      * @private
 429      */
 430     initDisabledDays : function(){
 431         var me = this,
 432             dd = me.disabledDates,
 433             re = '(?:',
 434             len;
 435
 436         if(!me.disabledDatesRE && dd){
 437                 len = dd.length - 1;
 438
 439             Ext.each(dd, function(d, i){
 440                 re += Ext.isDate(d) ? '^' + Ext.String.escapeRegex(Ext.Date.dateFormat(d, me.format)) + '$' : dd[i];
 441                 if(i != len){
 442                     re += '|';
 443                 }
 444             }, me);
 445             me.disabledDatesRE = new RegExp(re + ')');
 446         }
 447     },
 448
 449     /**
 450      * Replaces any existing disabled dates with new values and refreshes the DatePicker.
 451      * @param {Array/RegExp} disabledDates An array of date strings (see the {@link #disabledDates} config
 452      * for details on supported values), or a JavaScript regular expression used to disable a pattern of dates.
 453      * @return {Ext.picker.Date} this
 454      */
 455     setDisabledDates : function(dd){
 456         var me = this;
 457
 458         if(Ext.isArray(dd)){
 459             me.disabledDates = dd;
 460             me.disabledDatesRE = null;
 461         }else{
 462             me.disabledDatesRE = dd;
 463         }
 464         me.initDisabledDays();
 465         me.update(me.value, true);
 466         return me;
 467     },
 468
 469     /**
 470      * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
 471      * @param {Array} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config
 472      * for details on supported values.
 473      * @return {Ext.picker.Date} this
 474      */
 475     setDisabledDays : function(dd){
 476         this.disabledDays = dd;
 477         return this.update(this.value, true);
 478     },
 479
 480     /**
 481      * Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker.
 482      * @param {Date} value The minimum date that can be selected
 483      * @return {Ext.picker.Date} this
 484      */
 485     setMinDate : function(dt){
 486         this.minDate = dt;
 487         return this.update(this.value, true);
 488     },
 489
 490     /**
 491      * Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker.
 492      * @param {Date} value The maximum date that can be selected
 493      * @return {Ext.picker.Date} this
 494      */
 495     setMaxDate : function(dt){
 496         this.maxDate = dt;
 497         return this.update(this.value, true);
 498     },
 499
 500     /**
 501      * Sets the value of the date field
 502      * @param {Date} value The date to set
 503      * @return {Ext.picker.Date} this
 504      */
 505     setValue : function(value){
 506         this.value = Ext.Date.clearTime(value, true);
 507         return this.update(this.value);
 508     },
 509
 510     /**
 511      * Gets the current selected value of the date field
 512      * @return {Date} The selected date
 513      */
 514     getValue : function(){
 515         return this.value;
 516     },
 517
 518     // private
 519     focus : function(){
 520         this.update(this.activeDate);
 521     },
 522
 523     // private, inherit docs
 524     onEnable: function(){
 525         this.callParent();
 526         this.setDisabledStatus(false);
 527         this.update(this.activeDate);
 528
 529     },
 530
 531     // private, inherit docs
 532     onDisable : function(){
 533         this.callParent();
 534         this.setDisabledStatus(true);
 535     },
 536
 537     /**
 538      * Set the disabled state of various internal components
 539      * @private
 540      * @param {Boolean} disabled
 541      */
 542     setDisabledStatus : function(disabled){
 543         var me = this;
 544
 545         me.keyNav.setDisabled(disabled);
 546         me.prevRepeater.setDisabled(disabled);
 547         me.nextRepeater.setDisabled(disabled);
 548         if (me.showToday) {
 549             me.todayKeyListener.setDisabled(disabled);
 550             me.todayBtn.setDisabled(disabled);
 551         }
 552     },
 553
 554     /**
 555      * Get the current active date.
 556      * @private
 557      * @return {Date} The active date
 558      */
 559     getActive: function(){
 560         return this.activeDate || me.value;
 561     },
 562
 563     /**
 564      * Run any animation required to hide/show the month picker.
 565      * @private
 566      * @param {Boolean} isHide True if it's a hide operation
 567      */
 568     runAnimation: function(isHide){
 569         var options = {
 570                 target: this.monthPicker,
 571                 duration: 200
 572             };
 573
 574         Ext.fx.Manager.run();
 575         if (isHide) {
 576             //TODO: slideout
 577         } else {
 578             //TODO: slidein
 579         }
 580         Ext.create('Ext.fx.Anim', options);
 581     },
 582
 583     /**
 584      * Hides the month picker, if it's visible.
 585      * @return {Ext.picker.Date} this
 586      */
 587     hideMonthPicker : function(){
 588         var me = this,
 589             picker = me.monthPicker;
 590
 591         if (picker) {
 592             if (me.disableAnim) {
 593                 picker.hide();
 594             } else {
 595                 this.runAnimation(true);
 596             }
 597         }
 598         return me;
 599     },
 600
 601     /**
 602      * Show the month picker
 603      * @return {Ext.picker.Date} this
 604      */
 605     showMonthPicker : function(){
 606
 607         var me = this,
 608             picker,
 609             size,
 610             top,
 611             left;
 612
 613
 614         if (me.rendered && !me.disabled) {
 615             size = me.getSize();
 616             picker = me.createMonthPicker();
 617             picker.show();
 618             picker.setSize(size);
 619             picker.setValue(me.getActive());
 620
 621             if (me.disableAnim) {
 622                 picker.setPosition(-1, -1);
 623             } else {
 624                 me.runAnimation(false);
 625             }
 626         }
 627         return me;
 628     },
 629
 630     /**
 631      * Create the month picker instance
 632      * @private
 633      * @return {Ext.picker.Month} picker
 634      */
 635     createMonthPicker: function(){
 636         var me = this,
 637             picker = me.monthPicker;
 638
 639         if (!picker) {
 640             me.monthPicker = picker = Ext.create('Ext.picker.Month', {
 641                 renderTo: me.el,
 642                 floating: true,
 643                 shadow: false,
 644                 listeners: {
 645                     scope: me,
 646                     cancelclick: me.onCancelClick,
 647                     okclick: me.onOkClick,
 648                     yeardblclick: me.onOkClick,
 649                     monthdblclick: me.onOkClick
 650                 }
 651             });
 652
 653             me.on('beforehide', me.hideMonthPicker, me);
 654         }
 655         return picker;
 656     },
 657
 658     /**
 659      * Respond to an ok click on the month picker
 660      * @private
 661      */
 662     onOkClick: function(picker, value){
 663         var me = this,
 664             month = value[0],
 665             year = value[1],
 666             date = new Date(year, month, me.getActive().getDate());
 667
 668         if (date.getMonth() !== month) {
 669             // 'fix' the JS rolling date conversion if needed
 670             date = new Date(year, month, 1).getLastDateOfMonth();
 671         }
 672         me.update(date);
 673         me.hideMonthPicker();
 674     },
 675
 676     /**
 677      * Respond to a cancel click on the month picker
 678      * @private
 679      */
 680     onCancelClick: function(){
 681         this.hideMonthPicker();
 682     },
 683
 684     /**
 685      * Show the previous month.
 686      * @return {Ext.picker.Date} this
 687      */
 688     showPrevMonth : function(e){
 689         return this.update(Ext.Date.add(this.activeDate, Ext.Date.MONTH, -1));
 690     },
 691
 692     /**
 693      * Show the next month.
 694      * @return {Ext.picker.Date} this
 695      */
 696     showNextMonth : function(e){
 697         return this.update(Ext.Date.add(this.activeDate, Ext.Date.MONTH, 1));
 698     },
 699
 700     /**
 701      * Show the previous year.
 702      * @return {Ext.picker.Date} this
 703      */
 704     showPrevYear : function(){
 705         this.update(Ext.Date.add(this.activeDate, Ext.Date.YEAR, -1));
 706     },
 707
 708     /**
 709      * Show the next year.
 710      * @return {Ext.picker.Date} this
 711      */
 712     showNextYear : function(){
 713         this.update(Ext.Date.add(this.activeDate, Ext.Date.YEAR, 1));
 714     },
 715
 716     /**
 717      * Respond to the mouse wheel event
 718      * @private
 719      * @param {Ext.EventObject} e
 720      */
 721     handleMouseWheel : function(e){
 722         e.stopEvent();
 723         if(!this.disabled){
 724             var delta = e.getWheelDelta();
 725             if(delta > 0){
 726                 this.showPrevMonth();
 727             } else if(delta < 0){
 728                 this.showNextMonth();
 729             }
 730         }
 731     },
 732
 733     /**
 734      * Respond to a date being clicked in the picker
 735      * @private
 736      * @param {Ext.EventObject} e
 737      * @param {HTMLElement} t
 738      */
 739     handleDateClick : function(e, t){
 740         var me = this,
 741             handler = me.handler;
 742
 743         e.stopEvent();
 744         if(!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)){
 745             me.cancelFocus = me.focusOnSelect === false;
 746             me.setValue(new Date(t.dateValue));
 747             delete me.cancelFocus;
 748             me.fireEvent('select', me, me.value);
 749             if (handler) {
 750                 handler.call(me.scope || me, me, me.value);
 751             }
 752             // event handling is turned off on hide
 753             // when we are using the picker in a field
 754             // therefore onSelect comes AFTER the select
 755             // event.
 756             me.onSelect();
 757         }
 758     },
 759
 760     /**
 761      * Perform any post-select actions
 762      * @private
 763      */
 764     onSelect: function() {
 765         if (this.hideOnSelect) {
 766              this.hide();
 767          }
 768     },
 769
 770     /**
 771      * Sets the current value to today.
 772      * @return {Ext.picker.Date} this
 773      */
 774     selectToday : function(){
 775         var me = this,
 776             btn = me.todayBtn,
 777             handler = me.handler;
 778
 779         if(btn && !btn.disabled){
 780             me.setValue(Ext.Date.clearTime(new Date()));
 781             me.fireEvent('select', me, me.value);
 782             if (handler) {
 783                 handler.call(me.scope || me, me, me.value);
 784             }
 785             me.onSelect();
 786         }
 787         return me;
 788     },
 789
 790     /**
 791      * Update the selected cell
 792      * @private
 793      * @param {Date} date The new date
 794      * @param {Date} active The active date
 795      */
 796     selectedUpdate: function(date, active){
 797         var me = this,
 798             t = date.getTime(),
 799             cells = me.cells,
 800             cls = me.selectedCls;
 801
 802         cells.removeCls(cls);
 803         cells.each(function(c){
 804             if (c.dom.firstChild.dateValue == t) {
 805                 me.el.dom.setAttribute('aria-activedescendent', c.dom.id);
 806                 c.addCls(cls);
 807                 if(me.isVisible() && !me.cancelFocus){
 808                     Ext.fly(c.dom.firstChild).focus(50);
 809                 }
 810                 return false;
 811             }
 812         }, this);
 813     },
 814
 815     /**
 816      * Update the contents of the picker for a new month
 817      * @private
 818      * @param {Date} date The new date
 819      * @param {Date} active The active date
 820      */
 821     fullUpdate: function(date, active){
 822         var me = this,
 823             cells = me.cells.elements,
 824             textNodes = me.textNodes,
 825             disabledCls = me.disabledCellCls,
 826             eDate = Ext.Date,
 827             i = 0,
 828             extraDays = 0,
 829             visible = me.isVisible(),
 830             sel = +eDate.clearTime(date, true),
 831             today = +eDate.clearTime(new Date()),
 832             min = me.minDate ? eDate.clearTime(me.minDate, true) : Number.NEGATIVE_INFINITY,
 833             max = me.maxDate ? eDate.clearTime(me.maxDate, true) : Number.POSITIVE_INFINITY,
 834             ddMatch = me.disabledDatesRE,
 835             ddText = me.disabledDatesText,
 836             ddays = me.disabledDays ? me.disabledDays.join('') : false,
 837             ddaysText = me.disabledDaysText,
 838             format = me.format,
 839             days = eDate.getDaysInMonth(date),
 840             firstOfMonth = eDate.getFirstDateOfMonth(date),
 841             startingPos = firstOfMonth.getDay() - me.startDay,
 842             previousMonth = eDate.add(date, eDate.MONTH, -1),
 843             longDayFormat = me.longDayFormat,
 844             prevStart,
 845             current,
 846             disableToday,
 847             tempDate,
 848             setCellClass,
 849             html,
 850             cls,
 851             formatValue,
 852             value;
 853
 854         if (startingPos < 0) {
 855             startingPos += 7;
 856         }
 857
 858         days += startingPos;
 859         prevStart = eDate.getDaysInMonth(previousMonth) - startingPos;
 860         current = new Date(previousMonth.getFullYear(), previousMonth.getMonth(), prevStart, me.initHour);
 861
 862         if (me.showToday) {
 863             tempDate = eDate.clearTime(new Date());
 864             disableToday = (tempDate < min || tempDate > max ||
 865                 (ddMatch && format && ddMatch.test(eDate.dateFormat(tempDate, format))) ||
 866                 (ddays && ddays.indexOf(tempDate.getDay()) != -1));
 867
 868             if (!me.disabled) {
 869                 me.todayBtn.setDisabled(disableToday);
 870                 me.todayKeyListener.setDisabled(disableToday);
 871             }
 872         }
 873
 874         setCellClass = function(cell){
 875             value = +eDate.clearTime(current, true);
 876             cell.title = eDate.format(current, longDayFormat);
 877             // store dateValue number as an expando
 878             cell.firstChild.dateValue = value;
 879             if(value == today){
 880                 cell.className += ' ' + me.todayCls;
 881                 cell.title = me.todayText;
 882             }
 883             if(value == sel){
 884                 cell.className += ' ' + me.selectedCls;
 885                 me.el.dom.setAttribute('aria-activedescendant', cell.id);
 886                 if (visible && me.floating) {
 887                     Ext.fly(cell.firstChild).focus(50);
 888                 }
 889             }
 890             // disabling
 891             if(value < min) {
 892                 cell.className = disabledCls;
 893                 cell.title = me.minText;
 894                 return;
 895             }
 896             if(value > max) {
 897                 cell.className = disabledCls;
 898                 cell.title = me.maxText;
 899                 return;
 900             }
 901             if(ddays){
 902                 if(ddays.indexOf(current.getDay()) != -1){
 903                     cell.title = ddaysText;
 904                     cell.className = disabledCls;
 905                 }
 906             }
 907             if(ddMatch && format){
 908                 formatValue = eDate.dateFormat(current, format);
 909                 if(ddMatch.test(formatValue)){
 910                     cell.title = ddText.replace('%0', formatValue);
 911                     cell.className = disabledCls;
 912                 }
 913             }
 914         };
 915
 916         for(; i < me.numDays; ++i) {
 917             if (i < startingPos) {
 918                 html = (++prevStart);
 919                 cls = me.prevCls;
 920             } else if (i >= days) {
 921                 html = (++extraDays);
 922                 cls = me.nextCls;
 923             } else {
 924                 html = i - startingPos + 1;
 925                 cls = me.activeCls;
 926             }
 927             textNodes[i].innerHTML = html;
 928             cells[i].className = cls;
 929             current.setDate(current.getDate() + 1);
 930             setCellClass(cells[i]);
 931         }
 932
 933         me.monthBtn.setText(me.monthNames[date.getMonth()] + ' ' + date.getFullYear());
 934     },
 935
 936     /**
 937      * Update the contents of the picker
 938      * @private
 939      * @param {Date} date The new date
 940      * @param {Boolean} forceRefresh True to force a full refresh
 941      */
 942     update : function(date, forceRefresh){
 943         var me = this,
 944             active = me.activeDate;
 945
 946         if (me.rendered) {
 947             me.activeDate = date;
 948             if(!forceRefresh && active && me.el && active.getMonth() == date.getMonth() && active.getFullYear() == date.getFullYear()){
 949                 me.selectedUpdate(date, active);
 950             } else {
 951                 me.fullUpdate(date, active);
 952             }
 953         }
 954         return me;
 955     },
 956
 957     // private, inherit docs
 958     beforeDestroy : function() {
 959         var me = this;
 960
 961         if (me.rendered) {
 962             Ext.destroy(
 963                 me.todayKeyListener,
 964                 me.keyNav,
 965                 me.monthPicker,
 966                 me.monthBtn,
 967                 me.nextRepeater,
 968                 me.prevRepeater,
 969                 me.todayBtn
 970             );
 971             delete me.textNodes;
 972             delete me.cells.elements;
 973         }
 974     },
 975
 976     // private, inherit docs
 977     onShow: function() {
 978         this.callParent(arguments);
 979         if (this.focusOnShow) {
 980             this.focus();
 981         }
 982     }
 983 },
 984
 985 // After dependencies have loaded:
 986 function() {
 987     var proto = this.prototype;
 988
 989     proto.monthNames = Ext.Date.monthNames;
 990
 991     proto.dayNames = Ext.Date.dayNames;
 992
 993     proto.format = Ext.Date.defaultFormat;
 994 });