docs/source/Date3.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-picker.Date-method-constructor'><span id='Ext-picker.Date'>/**
   2 </span></span> * @class Ext.picker.Date
   3  * @extends Ext.Component
   4  * &lt;p&gt;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.&lt;/p&gt;
   6  * &lt;p&gt;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.&lt;/p&gt;
   9  * &lt;p&gt;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.&lt;/p&gt;
  11  * &lt;p&gt;All the string values documented below may be overridden by including an Ext locale file in your page.&lt;/p&gt;
  12  * &lt;p&gt;Example usage:&lt;/p&gt;
  13  * &lt;pre&gt;&lt;code&gt;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 });&lt;/code&gt;&lt;/pre&gt;
  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         '&lt;div class=&quot;{cls}&quot; id=&quot;{id}&quot; role=&quot;grid&quot; title=&quot;{ariaTitle} {value:this.longDay}&quot;&gt;',
  51             '&lt;div role=&quot;presentation&quot; class=&quot;{baseCls}-header&quot;&gt;',
  52                 '&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;',
  53                 '&lt;div class=&quot;{baseCls}-month&quot;&gt;&lt;/div&gt;',
  54                 '&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;',
  55             '&lt;/div&gt;',
  56             '&lt;table class=&quot;{baseCls}-inner&quot; cellspacing=&quot;0&quot; role=&quot;presentation&quot;&gt;',
  57                 '&lt;thead role=&quot;presentation&quot;&gt;&lt;tr role=&quot;presentation&quot;&gt;',
  58                     '&lt;tpl for=&quot;dayNames&quot;&gt;',
  59                         '&lt;th role=&quot;columnheader&quot; title=&quot;{.}&quot;&gt;&lt;span&gt;{.:this.firstInitial}&lt;/span&gt;&lt;/th&gt;',
  60                     '&lt;/tpl&gt;',
  61                 '&lt;/tr&gt;&lt;/thead&gt;',
  62                 '&lt;tbody role=&quot;presentation&quot;&gt;&lt;tr role=&quot;presentation&quot;&gt;',
  63                     '&lt;tpl for=&quot;days&quot;&gt;',
  64                         '{#:this.isEndOfWeek}',
  65                         '&lt;td role=&quot;gridcell&quot; id=&quot;{[Ext.id()]}&quot;&gt;',
  66                             '&lt;a role=&quot;presentation&quot; href=&quot;#&quot; hidefocus=&quot;on&quot; class=&quot;{parent.baseCls}-date&quot; tabIndex=&quot;1&quot;&gt;',
  67                                 '&lt;em role=&quot;presentation&quot;&gt;&lt;span role=&quot;presentation&quot;&gt;&lt;/span&gt;&lt;/em&gt;',
  68                             '&lt;/a&gt;',
  69                         '&lt;/td&gt;',
  70                     '&lt;/tpl&gt;',
  71                 '&lt;/tr&gt;&lt;/tbody&gt;',
  72             '&lt;/table&gt;',
  73             '&lt;tpl if=&quot;showToday&quot;&gt;',
  74                 '&lt;div role=&quot;presentation&quot; class=&quot;{baseCls}-footer&quot;&gt;&lt;/div&gt;',
  75             '&lt;/tpl&gt;',
  76         '&lt;/div&gt;',
  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 &amp;&amp; value !== 0;
  86                 return end ? '&lt;/tr&gt;&lt;tr role=&quot;row&quot;&gt;' : '';
  87             },
  88             longDay: function(value){
  89                 return Ext.Date.format(value, this.longDayFormat);
  90             }
  91         }
  92     ],
  93
  94     ariaTitle: 'Date Picker',
  95 <span id='Ext-picker.Date-cfg-todayText'>    /**
  96 </span>     * @cfg {String} todayText
  97      * The text to display on the button that selects the current date (defaults to &lt;code&gt;'Today'&lt;/code&gt;)
  98      */
  99     todayText : 'Today',
 100 <span id='Ext-picker.Date-cfg-handler'>    /**
 101 </span>     * @cfg {Function} handler
 102      * Optional. A function that will handle the select event of this picker.
 103      * The handler is passed the following parameters:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
 104      * &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;
 105      * &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;
 106      * &lt;/ul&gt;&lt;/div&gt;
 107      */
 108 <span id='Ext-picker.Date-cfg-scope'>    /**
 109 </span>     * @cfg {Object} scope
 110      * 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;
 111      * function will be called.  Defaults to this DatePicker instance.
 112      */
 113 <span id='Ext-picker.Date-cfg-todayTip'>    /**
 114 </span>     * @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 &lt;code&gt;'{0} (Spacebar)'&lt;/code&gt; where
 117      * the &lt;code&gt;{0}&lt;/code&gt; token is replaced by today's date.
 118      */
 119     todayTip : '{0} (Spacebar)',
 120 <span id='Ext-picker.Date-cfg-minText'>    /**
 121 </span>     * @cfg {String} minText
 122      * 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;)
 123      */
 124     minText : 'This date is before the minimum date',
 125 <span id='Ext-picker.Date-cfg-maxText'>    /**
 126 </span>     * @cfg {String} maxText
 127      * 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;)
 128      */
 129     maxText : 'This date is after the maximum date',
 130 <span id='Ext-picker.Date-cfg-format'>    /**
 131 </span>     * @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 <span id='Ext-picker.Date-cfg-disabledDaysText'>    /**
 136 </span>     * @cfg {String} disabledDaysText
 137      * The tooltip to display when the date falls on a disabled day (defaults to &lt;code&gt;'Disabled'&lt;/code&gt;)
 138      */
 139     disabledDaysText : 'Disabled',
 140 <span id='Ext-picker.Date-cfg-disabledDatesText'>    /**
 141 </span>     * @cfg {String} disabledDatesText
 142      * The tooltip text to display when the date falls on a disabled date (defaults to &lt;code&gt;'Disabled'&lt;/code&gt;)
 143      */
 144     disabledDatesText : 'Disabled',
 145 <span id='Ext-picker.Date-cfg-monthNames'>    /**
 146 </span>     * @cfg {Array} monthNames
 147      * An array of textual month names which can be overriden for localization support (defaults to Ext.Date.monthNames)
 148      */
 149 <span id='Ext-picker.Date-cfg-dayNames'>    /**
 150 </span>     * @cfg {Array} dayNames
 151      * An array of textual day names which can be overriden for localization support (defaults to Ext.Date.dayNames)
 152      */
 153 <span id='Ext-picker.Date-cfg-nextText'>    /**
 154 </span>     * @cfg {String} nextText
 155      * The next month navigation button tooltip (defaults to &lt;code&gt;'Next Month (Control+Right)'&lt;/code&gt;)
 156      */
 157     nextText : 'Next Month (Control+Right)',
 158 <span id='Ext-picker.Date-cfg-prevText'>    /**
 159 </span>     * @cfg {String} prevText
 160      * The previous month navigation button tooltip (defaults to &lt;code&gt;'Previous Month (Control+Left)'&lt;/code&gt;)
 161      */
 162     prevText : 'Previous Month (Control+Left)',
 163 <span id='Ext-picker.Date-cfg-monthYearText'>    /**
 164 </span>     * @cfg {String} monthYearText
 165      * The header month selector tooltip (defaults to &lt;code&gt;'Choose a month (Control+Up/Down to move years)'&lt;/code&gt;)
 166      */
 167     monthYearText : 'Choose a month (Control+Up/Down to move years)',
 168 <span id='Ext-picker.Date-cfg-startDay'>    /**
 169 </span>     * @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 <span id='Ext-picker.Date-cfg-showToday'>    /**
 174 </span>     * @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 &lt;code&gt;true&lt;/code&gt;).
 177      */
 178     showToday : true,
 179 <span id='Ext-picker.Date-cfg-minDate'>    /**
 180 </span>     * @cfg {Date} minDate
 181      * Minimum allowable date (JavaScript date object, defaults to null)
 182      */
 183 <span id='Ext-picker.Date-cfg-maxDate'>    /**
 184 </span>     * @cfg {Date} maxDate
 185      * Maximum allowable date (JavaScript date object, defaults to null)
 186      */
 187 <span id='Ext-picker.Date-cfg-disabledDays'>    /**
 188 </span>     * @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 <span id='Ext-picker.Date-cfg-disabledDatesRE'>    /**
 192 </span>     * @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 <span id='Ext-picker.Date-cfg-disabledDates'>    /**
 198 </span>     * @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      * &lt;ul&gt;
 202      * &lt;li&gt;['03/08/2003', '09/16/2003'] would disable those exact dates&lt;/li&gt;
 203      * &lt;li&gt;['03/08', '09/16'] would disable those days for every year&lt;/li&gt;
 204      * &lt;li&gt;['^03/08'] would only match the beginning (useful if you are using short years)&lt;/li&gt;
 205      * &lt;li&gt;['03/../2006'] would disable every day in March 2006&lt;/li&gt;
 206      * &lt;li&gt;['^03'] would disable every day in every March&lt;/li&gt;
 207      * &lt;/ul&gt;
 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 <span id='Ext-picker.Date-cfg-disableAnim'>    /**
 214 </span>     * @cfg {Boolean} disableAnim True to disable animations when showing the month picker. Defaults to &lt;tt&gt;false&lt;/tt&gt;.
 215      */
 216     disableAnim: true,
 217
 218 <span id='Ext-picker.Date-cfg-baseCls'>    /**
 219 </span>     * @cfg {String} baseCls
 220      * The base CSS class to apply to this components element (defaults to &lt;tt&gt;'x-datepicker'&lt;/tt&gt;).
 221      */
 222     baseCls: Ext.baseCSSPrefix + 'datepicker',
 223
 224 <span id='Ext-picker.Date-cfg-selectedCls'>    /**
 225 </span>     * @cfg {String} selectedCls
 226      * The class to apply to the selected cell. Defaults to &lt;tt&gt;'x-datepicker-selected'&lt;/tt&gt;
 227      */
 228
 229 <span id='Ext-picker.Date-cfg-disabledCellCls'>    /**
 230 </span>     * @cfg {String} disabledCellCls
 231      * The class to apply to disabled cells. Defaults to &lt;tt&gt;'x-datepicker-disabled'&lt;/tt&gt;
 232      */
 233
 234 <span id='Ext-picker.Date-cfg-longDayFormat'>    /**
 235 </span>     * @cfg {String} longDayFormat
 236      * The format for displaying a date in a longer format. Defaults to &lt;tt&gt;'F d, Y'&lt;/tt&gt;
 237      */
 238     longDayFormat: 'F d, Y',
 239
 240 <span id='Ext-picker.Date-cfg-keyNavConfig'>    /**
 241 </span>     * @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 <span id='Ext-picker.Date-cfg-focusOnShow'>    /**
 247 </span>     * @cfg {Boolean} focusOnShow
 248      * True to automatically focus the picker on show. Defaults to &lt;tt&gt;false&lt;/tt&gt;.
 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 <span id='Ext-picker.Date-event-select'>            /**
 283 </span>             * @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 <span id='Ext-picker.Date-method-initDisabledDays'>    /**
 427 </span>     * 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 &amp;&amp; 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 <span id='Ext-picker.Date-method-setDisabledDates'>    /**
 450 </span>     * 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 <span id='Ext-picker.Date-method-setDisabledDays'>    /**
 470 </span>     * 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 <span id='Ext-picker.Date-method-setMinDate'>    /**
 481 </span>     * 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 <span id='Ext-picker.Date-method-setMaxDate'>    /**
 491 </span>     * 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 <span id='Ext-picker.Date-method-setValue'>    /**
 501 </span>     * 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 <span id='Ext-picker.Date-method-getValue'>    /**
 511 </span>     * 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 <span id='Ext-picker.Date-method-setDisabledStatus'>    /**
 538 </span>     * 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 <span id='Ext-picker.Date-method-getActive'>    /**
 555 </span>     * 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 <span id='Ext-picker.Date-method-runAnimation'>    /**
 564 </span>     * 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 <span id='Ext-picker.Date-method-hideMonthPicker'>    /**
 584 </span>     * 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 <span id='Ext-picker.Date-method-showMonthPicker'>    /**
 602 </span>     * 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 &amp;&amp; !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 <span id='Ext-picker.Date-method-createMonthPicker'>    /**
 631 </span>     * 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 <span id='Ext-picker.Date-method-onOkClick'>    /**
 659 </span>     * 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 <span id='Ext-picker.Date-method-onCancelClick'>    /**
 677 </span>     * Respond to a cancel click on the month picker
 678      * @private
 679      */
 680     onCancelClick: function(){
 681         this.hideMonthPicker();
 682     },
 683
 684 <span id='Ext-picker.Date-method-showPrevMonth'>    /**
 685 </span>     * 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 <span id='Ext-picker.Date-method-showNextMonth'>    /**
 693 </span>     * 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 <span id='Ext-picker.Date-method-showPrevYear'>    /**
 701 </span>     * 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 <span id='Ext-picker.Date-method-showNextYear'>    /**
 709 </span>     * 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 <span id='Ext-picker.Date-method-handleMouseWheel'>    /**
 717 </span>     * 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 &gt; 0){
 726                 this.showPrevMonth();
 727             } else if(delta &lt; 0){
 728                 this.showNextMonth();
 729             }
 730         }
 731     },
 732
 733 <span id='Ext-picker.Date-method-handleDateClick'>    /**
 734 </span>     * 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 &amp;&amp; t.dateValue &amp;&amp; !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 <span id='Ext-picker.Date-method-onSelect'>    /**
 761 </span>     * Perform any post-select actions
 762      * @private
 763      */
 764     onSelect: function() {
 765         if (this.hideOnSelect) {
 766              this.hide();
 767          }
 768     },
 769
 770 <span id='Ext-picker.Date-method-selectToday'>    /**
 771 </span>     * 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 &amp;&amp; !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 <span id='Ext-picker.Date-method-selectedUpdate'>    /**
 791 </span>     * 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() &amp;&amp; !me.cancelFocus){
 808                     Ext.fly(c.dom.firstChild).focus(50);
 809                 }
 810                 return false;
 811             }
 812         }, this);
 813     },
 814
 815 <span id='Ext-picker.Date-method-fullUpdate'>    /**
 816 </span>     * 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 &lt; 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 &lt; min || tempDate &gt; max ||
 865                 (ddMatch &amp;&amp; format &amp;&amp; ddMatch.test(eDate.dateFormat(tempDate, format))) ||
 866                 (ddays &amp;&amp; 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 &amp;&amp; me.floating) {
 887                     Ext.fly(cell.firstChild).focus(50);
 888                 }
 889             }
 890             // disabling
 891             if(value &lt; min) {
 892                 cell.className = disabledCls;
 893                 cell.title = me.minText;
 894                 return;
 895             }
 896             if(value &gt; 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 &amp;&amp; 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 &lt; me.numDays; ++i) {
 917             if (i &lt; startingPos) {
 918                 html = (++prevStart);
 919                 cls = me.prevCls;
 920             } else if (i &gt;= 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 <span id='Ext-picker.Date-method-update'>    /**
 937 </span>     * 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 &amp;&amp; active &amp;&amp; me.el &amp;&amp; active.getMonth() == date.getMonth() &amp;&amp; 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 });
 995 </pre></pre></body></html>