docs/source/Date3.html

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