[extjs.git] / extjs / classic / classic / src / picker / Date.js

/**\r
 * A date picker. This class is used by the Ext.form.field.Date field to allow browsing and selection of valid\r
 * dates in a popup next to the field, but may also be used with other components.\r
 *\r
 * Typically you will need to implement a handler function to be notified when the user chooses a date from the picker;\r
 * you can register the handler using the {@link #select} event, or by implementing the {@link #handler} method.\r
 *\r
 * By default the user will be allowed to pick any date; this can be changed by using the {@link #minDate},\r
 * {@link #maxDate}, {@link #disabledDays}, {@link #disabledDatesRE}, and/or {@link #disabledDates} configs.\r
 *\r
 * All the string values documented below may be overridden by including an Ext locale file in your page.\r
 *\r
 *     @example\r
 *     Ext.create('Ext.panel.Panel', {\r
 *         title: 'Choose a future date:',\r
 *         width: 200,\r
 *         bodyPadding: 10,\r
 *         renderTo: Ext.getBody(),\r
 *         items: [{\r
 *             xtype: 'datepicker',\r
 *             minDate: new Date(),\r
 *             handler: function(picker, date) {\r
 *                 // do something with the selected date\r
 *             }\r
 *         }]\r
 *     });\r
 */\r
Ext.define('Ext.picker.Date', {\r
    extend: 'Ext.Component',\r
    requires: [\r
        'Ext.XTemplate',\r
        'Ext.button.Button',\r
        'Ext.button.Split',\r
        'Ext.util.ClickRepeater',\r
        'Ext.util.KeyNav',\r
        'Ext.fx.Manager',\r
        'Ext.picker.Month'\r
    ],\r
    alias: 'widget.datepicker',\r
    alternateClassName: 'Ext.DatePicker',\r
    \r
    //<locale>\r
    /**\r
     * @cfg {String} todayText\r
     * The text to display on the button that selects the current date\r
     */\r
    todayText: 'Today',\r
    //</locale>\r
    \r
    //<locale>\r
    /**\r
     * @cfg {String} ariaTitle\r
     * The text to display for the aria title\r
     */\r
    ariaTitle: 'Date Picker: {0}',\r
    //</locale>\r
    \r
    //<locale>\r
    /**\r
     * @cfg {String} ariaTitleDateFormat\r
     * The date format to display for the current value in the {@link #ariaTitle}\r
     */\r
    ariaTitleDateFormat: 'F d',\r
    //</locale>\r
\r
    /**\r
     * @cfg {Function} handler\r
     * Optional. A function that will handle the select event of this picker. The handler is passed the following\r
     * parameters:\r
     *\r
     *   - `picker` : Ext.picker.Date\r
     *\r
     * This Date picker.\r
     *\r
     *   - `date` : Date\r
     *\r
     * The selected date.\r
     */\r
\r
    /**\r
     * @cfg {Object} scope\r
     * The scope (`this` reference) in which the `{@link #handler}` function will be called.\r
     *\r
     * Defaults to this DatePicker instance.\r
     */\r
\r
    //<locale>\r
    /**\r
     * @cfg {String} todayTip\r
     * A string used to format the message for displaying in a tooltip over the button that selects the current date.\r
     * The `{0}` token in string is replaced by today's date.\r
     */\r
    todayTip: '{0} (Spacebar)',\r
    //</locale>\r
\r
    //<locale>\r
    /**\r
     * @cfg {String} minText\r
     * The error text to display if the minDate validation fails.\r
     */\r
    minText: 'This date is before the minimum date',\r
    //</locale>\r
    \r
    //<locale>\r
    /**\r
     * @cfg {String} ariaMinText The text that will be announced by Assistive Technologies\r
     * such as screen readers when user is navigating to the cell which date is less than\r
     * {@link #minDate}.\r
     */\r
    ariaMinText: "This date is before the minimum date",\r
    //</locale>\r
\r
    //<locale>\r
    /**\r
     * @cfg {String} maxText\r
     * The error text to display if the maxDate validation fails.\r
     */\r
    maxText: 'This date is after the maximum date',\r
    //</locale>\r
    \r
    //<locale>\r
    /**\r
     * @cfg {String} ariaMaxText The text that will be announced by Assistive Technologies\r
     * such as screen readers when user is navigating to the cell which date is later than\r
     * {@link #maxDate}.\r
     */\r
    ariaMaxText: "This date is after the maximum date",\r
    //</locale>\r
\r
    /**\r
     * @cfg {String} format\r
     * The default date format string which can be overriden for localization support. The format must be valid\r
     * according to {@link Ext.Date#parse} (defaults to {@link Ext.Date#defaultFormat}).\r
     */\r
\r
    //<locale>\r
    /**\r
     * @cfg {String} disabledDaysText\r
     * The tooltip to display when the date falls on a disabled day.\r
     */\r
    disabledDaysText: 'Disabled',\r
    //</locale>\r
    \r
    //<locale>\r
    /**\r
     * @cfg {String} ariaDisabledDaysText The text that Assistive Technologies such as screen readers\r
     * will announce when the date falls on a disabled day of week.\r
     */\r
    ariaDisabledDaysText: "This day of week is disabled",\r
    //</locale>\r
    \r
    //<locale>\r
    /**\r
     * @cfg {String} disabledDatesText\r
     * The tooltip text to display when the date falls on a disabled date.\r
     */\r
    disabledDatesText: 'Disabled',\r
    //</locale>\r
\r
    //<locale>\r
    /**\r
     * @cfg {String} ariaDisabledDatesText The text that Assistive Technologies such as screen readers\r
     * will announce when the date falls on a disabled date.\r
     */\r
    ariaDisabledDatesText: "This date is disabled",\r
    \r
    //</locale>\r
    /**\r
     * @cfg {String[]} monthNames\r
     * An array of textual month names which can be overriden for localization support (defaults to Ext.Date.monthNames)\r
     * @deprecated This config is deprecated. In future the month names will be retrieved from {@link Ext.Date}\r
     */\r
\r
    /**\r
     * @cfg {String[]} dayNames\r
     * An array of textual day names which can be overriden for localization support (defaults to Ext.Date.dayNames)\r
     * @deprecated This config is deprecated. In future the day names will be retrieved from {@link Ext.Date}\r
     */\r
\r
    //<locale>\r
    /**\r
     * @cfg {String} nextText\r
     * The next month navigation button tooltip\r
     */\r
    nextText: 'Next Month (Control+Right)',\r
    //</locale>\r
\r
    //<locale>\r
    /**\r
     * @cfg {String} prevText\r
     * The previous month navigation button tooltip\r
     */\r
    prevText: 'Previous Month (Control+Left)',\r
    //</locale>\r
\r
    //<locale>\r
    /**\r
     * @cfg {String} monthYearText\r
     * The header month selector tooltip\r
     */\r
    monthYearText: 'Choose a month (Control+Up/Down to move years)',\r
    //</locale>\r
    \r
    //<locale>\r
    /**\r
     * @cfg {String} monthYearFormat\r
     * The date format for the header month\r
     */\r
    monthYearFormat: 'F Y',\r
    //</locale>\r
\r
    //<locale>\r
    /**\r
     * @cfg {Number} [startDay=undefined]\r
     * Day index at which the week should begin, 0-based.\r
     *\r
     * Defaults to `0` (Sunday).\r
     */\r
    startDay: 0,\r
    //</locale>\r
\r
    //<locale>\r
    /**\r
     * @cfg {Boolean} showToday\r
     * False to hide the footer area containing the Today button and disable the keyboard handler for spacebar that\r
     * selects the current date.\r
     */\r
    showToday: true,\r
    //</locale>\r
\r
    /**\r
     * @cfg {Date} [minDate=null]\r
     * Minimum allowable date (JavaScript date object)\r
     */\r
\r
    /**\r
     * @cfg {Date} [maxDate=null]\r
     * Maximum allowable date (JavaScript date object)\r
     */\r
\r
    /**\r
     * @cfg {Number[]} [disabledDays=null]\r
     * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday.\r
     */\r
\r
    /**\r
     * @cfg {RegExp} [disabledDatesRE=null]\r
     * JavaScript regular expression used to disable a pattern of dates. The {@link #disabledDates}\r
     * config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the\r
     * disabledDates value.\r
     */\r
\r
    /**\r
     * @cfg {String[]} disabledDates\r
     * An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular expression so\r
     * they are very powerful. Some examples:\r
     *\r
     *   - ['03/08/2003', '09/16/2003'] would disable those exact dates\r
     *   - ['03/08', '09/16'] would disable those days for every year\r
     *   - ['^03/08'] would only match the beginning (useful if you are using short years)\r
     *   - ['03/../2006'] would disable every day in March 2006\r
     *   - ['^03'] would disable every day in every March\r
     *\r
     * Note that the format of the dates included in the array should exactly match the {@link #format} config. In order\r
     * to support regular expressions, if you are using a date format that has '.' in it, you will have to escape the\r
     * dot when restricting dates. For example: ['03\\.08\\.03'].\r
     */\r
\r
    /**\r
     * @cfg {Boolean} disableAnim\r
     * True to disable animations when showing the month picker.\r
     */\r
    disableAnim: false,\r
\r
    /**\r
     * @cfg {String} [baseCls='x-datepicker']\r
     * The base CSS class to apply to this components element.\r
     */\r
    baseCls: Ext.baseCSSPrefix + 'datepicker',\r
\r
    /**\r
     * @cfg {String} [selectedCls='x-datepicker-selected']\r
     * The class to apply to the selected cell.\r
     */\r
\r
    /**\r
     * @cfg {String} [disabledCellCls='x-datepicker-disabled']\r
     * The class to apply to disabled cells.\r
     */\r
\r
    //<locale>\r
    /**\r
     * @cfg {String} longDayFormat\r
     * The format for displaying a date in a longer format.\r
     */\r
    longDayFormat: 'F d, Y',\r
    //</locale>\r
\r
    /**\r
     * @cfg {Object} keyNavConfig\r
     * Specifies optional custom key event handlers for the {@link Ext.util.KeyNav} attached to this date picker. Must\r
     * conform to the config format recognized by the {@link Ext.util.KeyNav} constructor. Handlers specified in this\r
     * object will replace default handlers of the same name.\r
     */\r
\r
    /**\r
     * @cfg {String}\r
     * The {@link Ext.button.Button#ui} to use for the date picker's footer buttons.\r
     */\r
    footerButtonUI: 'default',\r
\r
    isDatePicker: true,\r
    \r
    ariaRole: 'region',\r
    focusable: true,\r
\r
    childEls: [\r
        'innerEl', 'eventEl', 'prevEl', 'nextEl', 'middleBtnEl', 'footerEl'\r
    ],\r
    \r
    border: true,\r
    \r
    /**\r
     * @cfg\r
     * @inheritdoc\r
     */\r
    renderTpl: [\r
        '<div id="{id}-innerEl" data-ref="innerEl" role="presentation">',\r
            '<div class="{baseCls}-header">',\r
                '<div id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-prev {baseCls}-arrow" role="presentation" title="{prevText}"></div>',\r
                '<div id="{id}-middleBtnEl" data-ref="middleBtnEl" class="{baseCls}-month" role="heading">{%this.renderMonthBtn(values, out)%}</div>',\r
                '<div id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-next {baseCls}-arrow" role="presentation" title="{nextText}"></div>',\r
            '</div>',\r
            '<table role="grid" id="{id}-eventEl" data-ref="eventEl" class="{baseCls}-inner" cellspacing="0" tabindex="0">',\r
                '<thead>',\r
                    '<tr role="row">',\r
                        '<tpl for="dayNames">',\r
                            '<th role="columnheader" class="{parent.baseCls}-column-header" aria-label="{.}">',\r
                                '<div role="presentation" class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',\r
                            '</th>',\r
                        '</tpl>',\r
                    '</tr>',\r
                '</thead>',\r
                '<tbody>',\r
                    '<tr role="row">',\r
                        '<tpl for="days">',\r
                            '{#:this.isEndOfWeek}',\r
                            '<td role="gridcell">',\r
                                '<div hidefocus="on" class="{parent.baseCls}-date"></div>',\r
                            '</td>',\r
                        '</tpl>',\r
                    '</tr>',\r
                '</tbody>',\r
            '</table>',\r
            '<tpl if="showToday">',\r
                '<div id="{id}-footerEl" data-ref="footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>',\r
            '</tpl>',\r
            // These elements are used with Assistive Technologies such as screen readers\r
            '<div id="{id}-todayText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{todayText}.</div>',\r
            '<div id="{id}-ariaMinText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaMinText}.</div>',\r
            '<div id="{id}-ariaMaxText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaMaxText}.</div>',\r
            '<div id="{id}-ariaDisabledDaysText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaDisabledDaysText}.</div>',\r
            '<div id="{id}-ariaDisabledDatesText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaDisabledDatesText}.</div>',\r
        '</div>',\r
        {\r
            firstInitial: function(value) {\r
                return Ext.picker.Date.prototype.getDayInitial(value);\r
            },\r
            isEndOfWeek: function(value) {\r
                // convert from 1 based index to 0 based\r
                // by decrementing value once.\r
                value--;\r
                var end = value % 7 === 0 && value !== 0;\r
                return end ? '</tr><tr role="row">' : '';\r
            },\r
            renderTodayBtn: function(values, out) {\r
                Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);\r
            },\r
            renderMonthBtn: function(values, out) {\r
                Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);\r
            }\r
        }\r
    ],\r
\r
    // Default value used to initialise each date in the DatePicker.\r
    // __Note:__ 12 noon was chosen because it steers well clear of all DST timezone changes.\r
    initHour: 12, // 24-hour format\r
\r
    numDays: 42,\r
\r
    /**\r
     * @event select\r
     * Fires when a date is selected\r
     * @param {Ext.picker.Date} this DatePicker\r
     * @param {Date} date The selected date\r
     */\r
\r
    initComponent: function() {\r
        var me = this,\r
            clearTime = Ext.Date.clearTime;\r
\r
        me.selectedCls = me.baseCls + '-selected';\r
        me.disabledCellCls = me.baseCls + '-disabled';\r
        me.prevCls = me.baseCls + '-prevday';\r
        me.activeCls = me.baseCls + '-active';\r
        me.cellCls = me.baseCls + '-cell';\r
        me.nextCls = me.baseCls + '-prevday';\r
        me.todayCls = me.baseCls + '-today';\r
        \r
        \r
        if (!me.format) {\r
            me.format = Ext.Date.defaultFormat;\r
        }\r
        if (!me.dayNames) {\r
            me.dayNames = Ext.Date.dayNames;\r
        }\r
        me.dayNames = me.dayNames.slice(me.startDay).concat(me.dayNames.slice(0, me.startDay));\r
\r
        me.callParent();\r
\r
        me.value = me.value ? clearTime(me.value, true) : clearTime(new Date());\r
\r
        me.initDisabledDays();\r
    },\r
\r
    // Keep the tree structure correct for Ext.form.field.Picker input fields which poke a 'pickerField' reference down into their pop-up pickers.\r
    getRefOwner: function() {\r
        return this.pickerField || this.callParent();\r
    },\r
\r
    getRefItems: function() {\r
        var results = [],\r
            monthBtn = this.monthBtn,\r
            todayBtn = this.todayBtn;\r
\r
        if (monthBtn) {\r
            results.push(monthBtn);\r
        }\r
\r
        if (todayBtn) {\r
            results.push(todayBtn);\r
        }\r
        return results;\r
    },\r
\r
    beforeRender: function() {\r
        /*\r
         * days array for looping through 6 full weeks (6 weeks * 7 days)\r
         * Note that we explicitly force the size here so the template creates\r
         * all the appropriate cells.\r
         */\r
        var me = this,\r
            encode = Ext.String.htmlEncode,\r
            days = new Array(me.numDays),\r
            today = Ext.Date.format(new Date(), me.format);\r
\r
        if (me.padding && !me.width) {\r
            me.cacheWidth();\r
        }\r
\r
        me.monthBtn = new Ext.button.Split({\r
            ownerCt: me,\r
            ownerLayout: me.getComponentLayout(),\r
            text: '',\r
            tooltip: me.monthYearText,\r
            tabIndex: -1,\r
            ariaRole: 'presentation',\r
            listeners: {\r
                click: me.doShowMonthPicker,\r
                arrowclick: me.doShowMonthPicker,\r
                scope: me\r
            }\r
        });\r
\r
        if (me.showToday) {\r
            me.todayBtn = new Ext.button.Button({\r
                ui: me.footerButtonUI,\r
                ownerCt: me,\r
                ownerLayout: me.getComponentLayout(),\r
                text: Ext.String.format(me.todayText, today),\r
                tooltip: Ext.String.format(me.todayTip, today),\r
                tooltipType: 'title',\r
                tabIndex: -1,\r
                ariaRole: 'presentation',\r
                handler: me.selectToday,\r
                scope: me\r
            });\r
        }\r
\r
        me.callParent();\r
\r
        Ext.applyIf(me, {\r
            renderData: {}\r
        });\r
\r
        Ext.apply(me.renderData, {\r
            dayNames: me.dayNames,\r
            showToday: me.showToday,\r
            prevText: encode(me.prevText),\r
            nextText: encode(me.nextText),\r
            todayText: encode(me.todayText),\r
            ariaMinText: encode(me.ariaMinText),\r
            ariaMaxText: encode(me.ariaMaxText),\r
            ariaDisabledDaysText: encode(me.ariaDisabledDaysText),\r
            ariaDisabledDatesText: encode(me.ariaDisabledDatesText),\r
            days: days\r
        });\r
\r
        me.protoEl.unselectable();\r
    },\r
\r
    cacheWidth: function() {\r
        var me = this,\r
            padding = me.parseBox(me.padding),\r
            widthEl = Ext.getBody().createChild({\r
                cls: me.baseCls + ' ' + me.borderBoxCls,\r
                style: 'position:absolute;top:-1000px;left:-1000px;'\r
            });\r
\r
        me.self.prototype.width = widthEl.getWidth() + padding.left + padding.right;\r
        widthEl.destroy();\r
    },\r
\r
    /**\r
     * @inheritdoc\r
     * @private\r
     */\r
    onRender: function(container, position) {\r
        var me = this;\r
\r
        me.callParent(arguments);\r
\r
        me.cells = me.eventEl.select('tbody td');\r
        me.textNodes = me.eventEl.query('tbody td div');\r
        \r
        me.eventEl.set({ 'aria-labelledby': me.monthBtn.id });\r
\r
        me.mon(me.eventEl, {\r
            scope: me,\r
            mousewheel: me.handleMouseWheel,\r
            click: {\r
                fn: me.handleDateClick,\r
                delegate: 'div.' + me.baseCls + '-date'\r
            }\r
        });\r
        \r
    },\r
\r
    /**\r
     * @inheritdoc\r
     * @private\r
     */\r
    initEvents: function() {\r
        var me = this,\r
            pickerField = me.pickerField,\r
            eDate = Ext.Date,\r
            day = eDate.DAY;\r
\r
        me.callParent();\r
\r
        // If we're part of a date field, don't allow us to focus, the field will\r
        // handle that. If we are standalone, then allow the default behaviour\r
        // to occur to receive focus\r
        if (pickerField) {\r
            me.el.on('mousedown', me.onMouseDown, me);\r
        }\r
\r
        // Month button is pointer interactive only, it should not be allowed to focus.\r
        me.monthBtn.el.on('mousedown', me.onMouseDown, me);\r
\r
        me.prevRepeater = new Ext.util.ClickRepeater(me.prevEl, {\r
            handler: me.showPrevMonth,\r
            scope: me,\r
            mousedownStopEvent: true\r
        });\r
\r
        me.nextRepeater = new Ext.util.ClickRepeater(me.nextEl, {\r
            handler: me.showNextMonth,\r
            scope: me,\r
            mousedownStopEvent: true\r
        });\r
\r
        me.keyNav = new Ext.util.KeyNav(me.eventEl, Ext.apply({\r
            scope: me,\r
\r
            left: function(e) {\r
                if (e.ctrlKey) {\r
                    e.preventDefault();\r
                    me.showPrevMonth();\r
                } else {\r
                    me.update(eDate.add(me.activeDate, day, -1));\r
                }\r
            },\r
\r
            right: function(e){\r
                if (e.ctrlKey) {\r
                    e.preventDefault();\r
                    me.showNextMonth();\r
                } else {\r
                    me.update(eDate.add(me.activeDate, day, 1));\r
                }\r
            },\r
\r
            up: function(e) {\r
                if (e.ctrlKey) {\r
                    me.showNextYear();\r
                } else {\r
                    me.update(eDate.add(me.activeDate, day, -7));\r
                }\r
            },\r
\r
            down: function(e) {\r
                if (e.ctrlKey) {\r
                    me.showPrevYear();\r
                } else {\r
                    me.update(eDate.add(me.activeDate, day, 7));\r
                }\r
            },\r
\r
            pageUp: function(e) {\r
                if (e.ctrlKey) {\r
                    me.showPrevYear();\r
                } else {\r
                    me.showPrevMonth();\r
                }\r
            },\r
\r
            pageDown: function(e) {\r
                if (e.ctrlKey) {\r
                    me.showNextYear();\r
                } else {\r
                    me.showNextMonth();\r
                }\r
            },\r
\r
            tab: function(e) {\r
                // When the picker is floating and attached to an input field, its\r
                // 'select' handler will focus the inputEl so when navigation happens\r
                // it does so as if the input field was focused all the time.\r
                // This is the desired behavior and we try not to interfere with it\r
                // in the picker itself, see below.\r
                me.handleTabKey(e);\r
                \r
                // Allow default behaviour of TAB - it MUST be allowed to navigate.\r
                return true;\r
            },\r
\r
            enter: function(e) {\r
                me.handleDateClick(e, me.activeCell.firstChild);\r
            },\r
\r
            space: function() {\r
                me.setValue(new Date(me.activeCell.firstChild.dateValue));\r
                var startValue = me.startValue,\r
                    value = me.value,\r
                    pickerValue;\r
\r
                if (pickerField) {\r
                    pickerValue = pickerField.getValue();\r
                    if (pickerValue && startValue && pickerValue.getTime() === value.getTime()) {\r
                        pickerField.setValue(startValue);\r
                    } else {\r
                        pickerField.setValue(value);\r
                    }\r
                }\r
            },\r
\r
            home: function(e) {\r
                me.update(eDate.getFirstDateOfMonth(me.activeDate));\r
            },\r
\r
            end: function(e) {\r
                me.update(eDate.getLastDateOfMonth(me.activeDate));\r
            }\r
        }, me.keyNavConfig));\r
\r
        if (me.disabled) {\r
            me.syncDisabled(true);\r
        }\r
        me.update(me.value);\r
    },\r
\r
    onMouseDown: function(e) {\r
        e.preventDefault();\r
    },\r
\r
    handleTabKey: function(e) {\r
        var me = this,\r
            t = me.getSelectedDate(me.activeDate),\r
            handler = me.handler;\r
\r
        // The following code is like handleDateClick without the e.stopEvent()\r
        if (!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)) {\r
            me.setValue(new Date(t.dateValue));\r
            me.fireEvent('select', me, me.value);\r
            if (handler) {\r
                handler.call(me.scope || me, me, me.value);\r
            }\r
            me.onSelect();\r
        }\r
        // Even if the above condition is not met we have to let the field know\r
        // that we're tabbing out - that's user action we can do nothing about\r
        else {\r
            me.fireEventArgs('tabout', [me]);\r
        }\r
    },\r
\r
    getSelectedDate: function (date) {\r
        var me = this,\r
            t = date.getTime(),\r
            cells = me.cells,\r
            cls = me.selectedCls,\r
            cellItems = cells.elements,\r
            cLen = cellItems.length,\r
            cell, c;\r
\r
        cells.removeCls(cls);\r
\r
        for (c = 0; c < cLen; c++) {\r
            cell = cellItems[c].firstChild;\r
            if (cell.dateValue === t) {\r
                return cell;\r
            }\r
        }\r
        return null;\r
    },\r
\r
    /**\r
     * Setup the disabled dates regex based on config options\r
     * @private\r
     */\r
    initDisabledDays: function() {\r
        var me = this,\r
            dd = me.disabledDates,\r
            re = '(?:',\r
            len,\r
            d, dLen, dI;\r
\r
        if(!me.disabledDatesRE && dd){\r
                len = dd.length - 1;\r
\r
            dLen = dd.length;\r
\r
            for (d = 0; d < dLen; d++) {\r
                dI = dd[d];\r
\r
                re += Ext.isDate(dI) ? '^' + Ext.String.escapeRegex(Ext.Date.dateFormat(dI, me.format)) + '$' : dI;\r
                if (d !== len) {\r
                    re += '|';\r
                }\r
            }\r
\r
            me.disabledDatesRE = new RegExp(re + ')');\r
        }\r
    },\r
\r
    /**\r
     * Replaces any existing disabled dates with new values and refreshes the DatePicker.\r
     * @param {String[]/RegExp} disabledDates An array of date strings (see the {@link #disabledDates} config for\r
     * details on supported values), or a JavaScript regular expression used to disable a pattern of dates.\r
     * @return {Ext.picker.Date} this\r
     */\r
    setDisabledDates: function(dd) {\r
        var me = this;\r
\r
        if (Ext.isArray(dd)) {\r
            me.disabledDates = dd;\r
            me.disabledDatesRE = null;\r
        } else {\r
            me.disabledDatesRE = dd;\r
        }\r
        me.initDisabledDays();\r
        me.update(me.value, true);\r
        return me;\r
    },\r
\r
    /**\r
     * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.\r
     * @param {Number[]} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config for details\r
     * on supported values.\r
     * @return {Ext.picker.Date} this\r
     */\r
    setDisabledDays: function(dd) {\r
        this.disabledDays = dd;\r
        return this.update(this.value, true);\r
    },\r
\r
    /**\r
     * Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker.\r
     * @param {Date} value The minimum date that can be selected\r
     * @return {Ext.picker.Date} this\r
     */\r
    setMinDate: function(dt) {\r
        this.minDate = dt;\r
        return this.update(this.value, true);\r
    },\r
\r
    /**\r
     * Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker.\r
     * @param {Date} value The maximum date that can be selected\r
     * @return {Ext.picker.Date} this\r
     */\r
    setMaxDate: function(dt) {\r
        this.maxDate = dt;\r
        return this.update(this.value, true);\r
    },\r
\r
    /**\r
     * Sets the value of the date field\r
     * @param {Date} value The date to set\r
     * @return {Ext.picker.Date} this\r
     */\r
    setValue: function(value) {\r
        // If passed a null value just pass in a new date object.\r
        this.value = Ext.Date.clearTime(value || new Date(), true);\r
        return this.update(this.value);\r
    },\r
\r
    /**\r
     * Gets the current selected value of the date field\r
     * @return {Date} The selected date\r
     */\r
    getValue: function() {\r
        return this.value;\r
    },\r
\r
    //<locale type="function">\r
    /**\r
     * Gets a single character to represent the day of the week\r
     * @return {String} The character\r
     */\r
    getDayInitial: function(value) {\r
        return value.substr(0,1);\r
    },\r
    //</locale>\r
\r
    /**\r
     * @inheritdoc\r
     * @private\r
     */\r
    onEnable: function() {\r
        var me = this;\r
\r
        me.callParent();\r
        me.syncDisabled(false);\r
        me.update(me.activeDate);\r
\r
    },\r
\r
    /**\r
     * @inheritdoc\r
     * @private\r
     */\r
    onShow: function() {\r
        var me = this;\r
\r
        me.callParent();\r
        me.syncDisabled(false);\r
        if (me.pickerField) {\r
            me.startValue = me.pickerField.getValue();\r
        }\r
    },\r
    \r
    /**\r
     * @inheritdoc\r
     * @private\r
     */\r
    onHide: function() {\r
        this.callParent();\r
        this.syncDisabled(true);\r
    },\r
\r
    /**\r
     * @inheritdoc\r
     * @private\r
     */\r
    onDisable: function() {\r
        this.callParent();\r
        this.syncDisabled(true);\r
    },\r
\r
    /**\r
     * Get the current active date.\r
     * @private\r
     * @return {Date} The active date\r
     */\r
    getActive: function(){\r
        return this.activeDate || this.value;\r
    },\r
\r
    /**\r
     * Run any animation required to hide/show the month picker.\r
     * @private\r
     * @param {Boolean} isHide True if it's a hide operation\r
     */\r
    runAnimation: function(isHide){\r
        var picker = this.monthPicker,\r
            options = {\r
                duration: 200,\r
                callback: function() {\r
                    picker.setVisible(!isHide);\r
                }\r
            };\r
\r
        if (isHide) {\r
            picker.el.slideOut('t', options);\r
        } else {\r
            picker.el.slideIn('t', options);\r
        }\r
    },\r
\r
    /**\r
     * Hides the month picker, if it's visible.\r
     * @param {Boolean} [animate] Indicates whether to animate this action. If the animate\r
     * parameter is not specified, the behavior will use {@link #disableAnim} to determine\r
     * whether to animate or not.\r
     * @return {Ext.picker.Date} this\r
     */\r
    hideMonthPicker: function(animate){\r
        var me = this,\r
            picker = me.monthPicker;\r
\r
        if (picker && picker.isVisible()) {\r
            if (me.shouldAnimate(animate)) {\r
                me.runAnimation(true);\r
            } else {\r
                picker.hide();\r
            }\r
        }\r
        return me;\r
    },\r
    \r
    doShowMonthPicker: function() {\r
        // Wrap in an extra call so we can prevent the button\r
        // being passed as an animation parameter.\r
        this.showMonthPicker();\r
    },\r
    \r
    doHideMonthPicker: function() {\r
        // Wrap in an extra call so we can prevent this\r
        // being passed as an animation parameter\r
        this.hideMonthPicker();\r
    },\r
\r
    /**\r
     * Show the month picker\r
     * @param {Boolean} [animate] Indicates whether to animate this action. If the animate\r
     * parameter is not specified, the behavior will use {@link #disableAnim} to determine\r
     * whether to animate or not.\r
     * @return {Ext.picker.Date} this\r
     */\r
    showMonthPicker: function(animate) {\r
        var me = this,\r
            el = me.el,\r
            picker;\r
        \r
        if (me.rendered && !me.disabled) {\r
            picker = me.createMonthPicker();            \r
            if (!picker.isVisible()) {\r
                picker.setValue(me.getActive());\r
                picker.setSize(el.getSize());\r
\r
                // Null out floatParent so that the [-1, -1] position is not made relative to this\r
                picker.floatParent = null;\r
                picker.setPosition(-el.getBorderWidth('l'), -el.getBorderWidth('t'));\r
                if (me.shouldAnimate(animate)) {\r
                    me.runAnimation(false);\r
                } else {\r
                    picker.show();\r
                }\r
            }\r
        }\r
        return me;\r
    },\r
    \r
    /**\r
     * Checks whether a hide/show action should animate\r
     * @private\r
     * @param {Boolean} [animate] A possible animation value\r
     * @return {Boolean} Whether to animate the action\r
     */\r
    shouldAnimate: function(animate) {\r
        return Ext.isDefined(animate) ? animate : !this.disableAnim;\r
    },\r
\r
    /**\r
     * Create the month picker instance\r
     * @private\r
     * @return {Ext.picker.Month} picker\r
     */\r
    createMonthPicker: function() {\r
        var me = this,\r
            picker = me.monthPicker;\r
\r
        if (!picker) {\r
            me.monthPicker = picker = new Ext.picker.Month({\r
                renderTo: me.el,\r
                // We need to set the ownerCmp so that owns() can correctly\r
                // match up the component hierarchy so that focus does not leave\r
                // an owning picker field if/when this gets focus.\r
                ownerCmp: me,\r
                floating: true,\r
                padding: me.padding,\r
                shadow: false,\r
                small: me.showToday === false,\r
                footerButtonUI: me.footerButtonUI,\r
                listeners: {\r
                    scope: me,\r
                    cancelclick: me.onCancelClick,\r
                    okclick: me.onOkClick,\r
                    yeardblclick: me.onOkClick,\r
                    monthdblclick: me.onOkClick\r
                }\r
            });\r
            if (!me.disableAnim) {\r
                // hide the element if we're animating to prevent an initial flicker\r
                picker.el.setStyle('display', 'none');\r
            }\r
            picker.hide();\r
            me.on('beforehide', me.doHideMonthPicker, me);\r
        }\r
        return picker;\r
    },\r
\r
    /**\r
     * Respond to an ok click on the month picker\r
     * @private\r
     */\r
    onOkClick: function(picker, value) {\r
        var me = this,\r
            month = value[0],\r
            year = value[1],\r
            date = new Date(year, month, me.getActive().getDate());\r
\r
        if (date.getMonth() !== month) {\r
            // 'fix' the JS rolling date conversion if needed\r
            date = Ext.Date.getLastDateOfMonth(new Date(year, month, 1));\r
        }\r
        me.setValue(date);\r
        me.hideMonthPicker();\r
    },\r
\r
    /**\r
     * Respond to a cancel click on the month picker\r
     * @private\r
     */\r
    onCancelClick: function() {\r
        this.selectedUpdate(this.activeDate);\r
        this.hideMonthPicker();\r
    },\r
\r
    /**\r
     * Show the previous month.\r
     * @param {Object} e\r
     * @return {Ext.picker.Date} this\r
     */\r
    showPrevMonth: function(e) {\r
        return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.MONTH, -1));\r
    },\r
\r
    /**\r
     * Show the next month.\r
     * @param {Object} e\r
     * @return {Ext.picker.Date} this\r
     */\r
    showNextMonth: function(e) {\r
        return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.MONTH, 1));\r
    },\r
\r
    /**\r
     * Show the previous year.\r
     * @return {Ext.picker.Date} this\r
     */\r
    showPrevYear: function() {\r
        return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.YEAR, -1));\r
    },\r
\r
    /**\r
     * Show the next year.\r
     * @return {Ext.picker.Date} this\r
     */\r
    showNextYear: function() {\r
        return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.YEAR, 1));\r
    },\r
\r
    /**\r
     * Respond to the mouse wheel event\r
     * @private\r
     * @param {Ext.event.Event} e\r
     */\r
    handleMouseWheel: function(e) {\r
        var delta;\r
        \r
        e.stopEvent();\r
        \r
        if (!this.disabled) {\r
            delta = e.getWheelDelta();\r
            \r
            if (delta > 0) {\r
                this.showPrevMonth();\r
            }\r
            else if (delta < 0) {\r
                this.showNextMonth();\r
            }\r
        }\r
    },\r
\r
    /**\r
     * Respond to a date being clicked in the picker\r
     * @private\r
     * @param {Ext.event.Event} e\r
     * @param {HTMLElement} t\r
     */\r
    handleDateClick: function(e, t) {\r
        var me = this,\r
            handler = me.handler;\r
\r
        e.stopEvent();\r
        \r
        if (!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)) {\r
            me.setValue(new Date(t.dateValue));\r
            me.fireEvent('select', me, me.value);\r
            \r
            if (handler) {\r
                handler.call(me.scope || me, me, me.value);\r
            }\r
            \r
            // event handling is turned off on hide\r
            // when we are using the picker in a field\r
            // therefore onSelect comes AFTER the select\r
            // event.\r
            me.onSelect();\r
        }\r
    },\r
\r
    /**\r
     * Perform any post-select actions\r
     * @private\r
     */\r
    onSelect: function() {\r
        if (this.hideOnSelect) {\r
             this.hide();\r
         }\r
    },\r
\r
    /**\r
     * Sets the current value to today.\r
     * @return {Ext.picker.Date} this\r
     */\r
    selectToday: function() {\r
        var me = this,\r
            btn = me.todayBtn,\r
            handler = me.handler;\r
\r
        if (btn && !btn.disabled) {\r
            me.setValue(Ext.Date.clearTime(new Date()));\r
            me.fireEvent('select', me, me.value);\r
            if (handler) {\r
                handler.call(me.scope || me, me, me.value);\r
            }\r
            me.onSelect();\r
        }\r
        return me;\r
    },\r
\r
    /**\r
     * Update the selected cell\r
     * @private\r
     * @param {Date} date The new date\r
     */\r
    selectedUpdate: function(date) {\r
        var me        = this,\r
            t         = date.getTime(),\r
            cells     = me.cells,\r
            cls       = me.selectedCls,\r
            c,\r
            cLen      = cells.getCount(),\r
            cell;\r
        \r
        me.eventEl.dom.setAttribute('aria-busy', 'true');\r
        \r
        cell = me.activeCell;\r
        \r
        if (cell) {\r
            Ext.fly(cell).removeCls(cls);\r
            cell.setAttribute('aria-selected', false);\r
        }\r
\r
        for (c = 0; c < cLen; c++) {\r
            cell = cells.item(c);\r
\r
            if (me.textNodes[c].dateValue === t) {\r
                me.activeCell = cell.dom;\r
                me.eventEl.dom.setAttribute('aria-activedescendant', cell.dom.id);\r
                cell.dom.setAttribute('aria-selected', true);\r
                cell.addCls(cls);\r
                me.fireEvent('highlightitem', me, cell);\r
                break;\r
            }\r
        }\r
        \r
        me.eventEl.dom.removeAttribute('aria-busy');\r
    },\r
\r
    /**\r
     * Update the contents of the picker for a new month\r
     * @private\r
     * @param {Date} date The new date\r
     */\r
    fullUpdate: function(date) {\r
        var me = this,\r
            cells = me.cells.elements,\r
            textNodes = me.textNodes,\r
            disabledCls = me.disabledCellCls,\r
            eDate = Ext.Date,\r
            i = 0,\r
            extraDays = 0,\r
            newDate = +eDate.clearTime(date, true),\r
            today = +eDate.clearTime(new Date()),\r
            min = me.minDate ? eDate.clearTime(me.minDate, true) : Number.NEGATIVE_INFINITY,\r
            max = me.maxDate ? eDate.clearTime(me.maxDate, true) : Number.POSITIVE_INFINITY,\r
            ddMatch = me.disabledDatesRE,\r
            ddText = me.disabledDatesText,\r
            ddays = me.disabledDays ? me.disabledDays.join('') : false,\r
            ddaysText = me.disabledDaysText,\r
            format = me.format,\r
            days = eDate.getDaysInMonth(date),\r
            firstOfMonth = eDate.getFirstDateOfMonth(date),\r
            startingPos = firstOfMonth.getDay() - me.startDay,\r
            previousMonth = eDate.add(date, eDate.MONTH, -1),\r
            ariaTitleDateFormat = me.ariaTitleDateFormat,\r
            prevStart, current, disableToday, tempDate, setCellClass, html, cls,\r
            formatValue, value;\r
\r
        if (startingPos < 0) {\r
            startingPos += 7;\r
        }\r
\r
        days += startingPos;\r
        prevStart = eDate.getDaysInMonth(previousMonth) - startingPos;\r
        current = new Date(previousMonth.getFullYear(), previousMonth.getMonth(), prevStart, me.initHour);\r
\r
        if (me.showToday) {\r
            tempDate = eDate.clearTime(new Date());\r
            disableToday = (tempDate < min || tempDate > max ||\r
                (ddMatch && format && ddMatch.test(eDate.dateFormat(tempDate, format))) ||\r
                (ddays && ddays.indexOf(tempDate.getDay()) !== -1));\r
\r
            if (!me.disabled) {\r
                me.todayBtn.setDisabled(disableToday);\r
            }\r
        }\r
\r
        setCellClass = function(cellIndex, cls){\r
            var cell = cells[cellIndex],\r
                describedBy = [];\r
            \r
            // Cells are not rendered with ids\r
            if (!cell.hasAttribute('id')) {\r
                cell.setAttribute('id', me.id + '-cell-' + cellIndex);\r
            }\r
            \r
            // store dateValue number as an expando\r
            value = +eDate.clearTime(current, true);\r
            cell.firstChild.dateValue = value;\r
            \r
            cell.setAttribute('aria-label', eDate.format(current, ariaTitleDateFormat));\r
            \r
            // Here and below we can't use title attribute instead of data-qtip\r
            // because JAWS will announce title value before cell content\r
            // which is not what we need. Also we are using aria-describedby attribute\r
            // and not placing the text in aria-label because some cells may have\r
            // compound descriptions (like Today and Disabled day).\r
            cell.removeAttribute('aria-describedby');\r
            cell.removeAttribute('data-qtip');\r
            \r
            if (value === today) {\r
                cls += ' ' + me.todayCls;\r
                describedBy.push(me.id + '-todayText');\r
            }\r
            \r
            if (value === newDate) {\r
                me.activeCell = cell;\r
                me.eventEl.dom.setAttribute('aria-activedescendant', cell.id);\r
                cell.setAttribute('aria-selected', true);\r
                cls += ' ' + me.selectedCls;\r
                me.fireEvent('highlightitem', me, cell);\r
            }\r
            else {\r
                cell.setAttribute('aria-selected', false);\r
            }\r
\r
            if (value < min) {\r
                cls += ' ' + disabledCls;\r
                describedBy.push(me.id + '-ariaMinText');\r
                cell.setAttribute('data-qtip', me.minText);\r
            }\r
            else if (value > max) {\r
                cls += ' ' + disabledCls;\r
                describedBy.push(me.id + '-ariaMaxText');\r
                cell.setAttribute('data-qtip', me.maxText);\r
            }\r
            else if (ddays && ddays.indexOf(current.getDay()) !== -1){\r
                cell.setAttribute('data-qtip', ddaysText);\r
                describedBy.push(me.id + '-ariaDisabledDaysText');\r
                cls += ' ' + disabledCls;\r
            }\r
            else if (ddMatch && format){\r
                formatValue = eDate.dateFormat(current, format);\r
                if(ddMatch.test(formatValue)){\r
                    cell.setAttribute('data-qtip', ddText.replace('%0', formatValue));\r
                    describedBy.push(me.id + '-ariaDisabledDatesText');\r
                    cls += ' ' + disabledCls;\r
                }\r
            }\r
            \r
            if (describedBy.length) {\r
                cell.setAttribute('aria-describedby', describedBy.join(' '));\r
            }\r
            \r
            cell.className = cls + ' ' + me.cellCls;\r
        };\r
        \r
        me.eventEl.dom.setAttribute('aria-busy', 'true');\r
\r
        for (; i < me.numDays; ++i) {\r
            if (i < startingPos) {\r
                html = (++prevStart);\r
                cls = me.prevCls;\r
            } else if (i >= days) {\r
                html = (++extraDays);\r
                cls = me.nextCls;\r
            } else {\r
                html = i - startingPos + 1;\r
                cls = me.activeCls;\r
            }\r
            textNodes[i].innerHTML = html;\r
            current.setDate(current.getDate() + 1);\r
            setCellClass(i, cls);\r
        }\r
        \r
        me.eventEl.dom.removeAttribute('aria-busy');\r
\r
        me.monthBtn.setText(Ext.Date.format(date, me.monthYearFormat));\r
    },\r
\r
    /**\r
     * Update the contents of the picker\r
     * @private\r
     * @param {Date} date The new date\r
     * @param {Boolean} forceRefresh True to force a full refresh\r
     */\r
    update: function(date, forceRefresh) {\r
        var me = this,\r
            active = me.activeDate;\r
\r
        if (me.rendered) {\r
            me.activeDate = date;\r
            if (!forceRefresh && active && me.el &&\r
                    active.getMonth() === date.getMonth() &&\r
                    active.getFullYear() === date.getFullYear()) {\r
                me.selectedUpdate(date, active);\r
            } else {\r
                me.fullUpdate(date, active);\r
            }\r
        }\r
        return me;\r
    },\r
\r
    /**\r
     * @private\r
     * @inheritdoc\r
     */\r
    beforeDestroy: function() {\r
        var me = this;\r
\r
        if (me.rendered) {\r
            Ext.destroy(\r
                me.keyNav,\r
                me.monthPicker,\r
                me.monthBtn,\r
                me.nextRepeater,\r
                me.prevRepeater,\r
                me.todayBtn,\r
                me.todayElSpan\r
            );\r
            delete me.textNodes;\r
            delete me.cells.elements;\r
        }\r
        me.callParent();\r
    },\r
\r
    privates: {\r
        // Do the job of a container layout at this point even though we are not a Container.\r
        // TODO: Refactor as a Container.\r
        finishRenderChildren: function () {\r
            var me = this;\r
\r
            me.callParent();\r
            me.monthBtn.finishRender();\r
            if (me.showToday) {\r
                me.todayBtn.finishRender();\r
            }\r
        },\r
        \r
        getFocusEl: function() {\r
            return this.eventEl;\r
        },\r
\r
        /**\r
         * Set the disabled state of various internal components\r
         * @param {Boolean} disabled\r
         * @private\r
         */\r
        syncDisabled: function (disabled) {\r
            var me = this,\r
                keyNav = me.keyNav;\r
\r
            // If we have one, we have all\r
            if (keyNav) {\r
                keyNav.setDisabled(disabled);\r
                me.prevRepeater.setDisabled(disabled);\r
                me.nextRepeater.setDisabled(disabled);\r
                if (me.todayBtn) {\r
                    me.todayBtn.setDisabled(disabled);\r
                }\r
            }\r
        }\r
    }\r
});\r