ExtJS学习笔记(四) Datetime控件

// 本段JS，是复制出源码，在源码基础上修改的代码。使用别人修改后的代码，在此修改。方便自己以后使用。
// 复制下段JS，并引入页面。
// 使用方式
/* 
{
    xtype: 'datetimefield',
    format: "Y-m-d H:i:s",
    fieldLabel: "日期时间"
}
*/
/**
* @修改人 Sgai 李强
* A date picker. This class is used by the Ext.form.field.Date field to allow browsing and selection of valid
* dates in a popup next to the field, but may also be used with other components.
*
* Typically you will need to implement a handler function to be notified when the user chooses a date from the picker;
* you can register the handler using the {@link #select} event, or by implementing the {@link #handler} method.
*
* By default the user will be allowed to pick any date; this can be changed by using the {@link #minDate},
* {@link #maxDate}, {@link #disabledDays}, {@link #disabledDatesRE}, and/or {@link #disabledDates} configs.
*
* All the string values documented below may be overridden by including an Ext locale file in your page.
*
*     @example
*     Ext.create('Ext.panel.Panel', {
*         title: 'Choose a future date:',
*         width: 200,
*         bodyPadding: 10,
*         renderTo: Ext.getBody(),
*         items: [{
*             xtype: 'datepicker',
*             minDate: new Date(),
*             handler: function(picker, date) {
*                 // do something with the selected date
*             }
*         }]
*     });
*/
Ext.define('Ext.ux.DateTimePicker', {
    extend: 'Ext.Component',
    alias: 'widget.datetimepicker',
    alternateClassName: 'Ext.DateTimePicker',
    requires: [
        'Ext.XTemplate',
        'Ext.button.Button',
        'Ext.button.Split',
        'Ext.util.ClickRepeater',
        'Ext.util.KeyNav',
        'Ext.fx.Manager',
        'Ext.picker.Month'
    ],

    //<locale>
    /**
    * @cfg {String} todayText
    * The text to display on the button that selects the current date
    */
    todayText: '今天',
    //添加确定按钮
    okText: '确认',
    okTip: '{0}',
    //添加清除按钮
    clearText: '清除',
    clearTip: '清除日期',
    //</locale>

    //<locale>
    /**
    * @cfg {String} ariaTitle
    * The text to display for the aria title
    */
    ariaTitle: 'Date Picker: {0}',
    //</locale>

    //<locale>
    /**
    * @cfg {String} ariaTitleDateFormat
    * The date format to display for the current value in the {@link #ariaTitle}
    */
    ariaTitleDateFormat: 'F d',
    //</locale>

    /**
    * @cfg {Function} handler
    * Optional. A function that will handle the select event of this picker. The handler is passed the following
    * parameters:
    *
    *   - `picker` : Ext.picker.Date
    *
    * This Date picker.
    *
    *   - `date` : Date
    *
    * The selected date.
    */

    /**
    * @cfg {Object} scope
    * The scope (`this` reference) in which the `{@link #handler}` function will be called.
    *
    * Defaults to this DatePicker instance.
    */

    //<locale>
    /**
    * @cfg {String} todayTip
    * A string used to format the message for displaying in a tooltip over the button that selects the current date.
    * The `{0}` token in string is replaced by today's date.
    */
    todayTip: '{0}',
    //</locale>

    //<locale>
    /**
    * @cfg {String} minText
    * The error text to display if the minDate validation fails.
    */
    minText: '该日期早于允许选择的最小日期',
    //</locale>

    //<locale>
    /**
    * @cfg {String} ariaMinText The text that will be announced by Assistive Technologies
    * such as screen readers when user is navigating to the cell which date is less than
    * {@link #minDate}.
    */
    ariaMinText: "该日期早于允许选择的最小日期",
    //</locale>

    //<locale>
    /**
    * @cfg {String} maxText
    * The error text to display if the maxDate validation fails.
    */
    maxText: '该日期晚于允许选择的最小日期',
    //</locale>

    //<locale>
    /**
    * @cfg {String} ariaMaxText The text that will be announced by Assistive Technologies
    * such as screen readers when user is navigating to the cell which date is later than
    * {@link #maxDate}.
    */
    ariaMaxText: "该日期晚于允许选择的最小日期",
    //</locale>

    /**
    * @cfg {String} format
    * The default date format string which can be overriden for localization support. The format must be valid
    * according to {@link Ext.Date#parse} (defaults to {@link Ext.Date#defaultFormat}).
    */

    //<locale>
    /**
    * @cfg {String} disabledDaysText
    * The tooltip to display when the date falls on a disabled day.
    */
    disabledDaysText: '禁止选择',
    //</locale>

    //<locale>
    /**
    * @cfg {String} ariaDisabledDaysText The text that Assistive Technologies such as screen readers
    * will announce when the date falls on a disabled day of week.
    */
    ariaDisabledDaysText: "禁止选择",
    //</locale>

    //<locale>
    /**
    * @cfg {String} disabledDatesText
    * The tooltip text to display when the date falls on a disabled date.
    */
    disabledDatesText: '禁止选择',
    //</locale>

    //<locale>
    /**
    * @cfg {String} ariaDisabledDatesText The text that Assistive Technologies such as screen readers
    * will announce when the date falls on a disabled date.
    */
    ariaDisabledDatesText: "该日期禁止选择",

    //</locale>
    /**
    * @cfg {String[]} monthNames
    * An array of textual month names which can be overriden for localization support (defaults to Ext.Date.monthNames)
    * @deprecated This config is deprecated. In future the month names will be retrieved from {@link Ext.Date}
    */

    /**
    * @cfg {String[]} dayNames
    * An array of textual day names which can be overriden for localization support (defaults to Ext.Date.dayNames)
    * @deprecated This config is deprecated. In future the day names will be retrieved from {@link Ext.Date}
    */

    //<locale>
    /**
    * @cfg {String} nextText
    * The next month navigation button tooltip
    */
    nextText: '下月 (Control+Right)',
    //</locale>

    //<locale>
    /**
    * @cfg {String} prevText
    * The previous month navigation button tooltip
    */
    prevText: '上月 (Control+Left)',
    //</locale>

    //<locale>
    /**
    * @cfg {String} monthYearText
    * The header month selector tooltip
    */
    monthYearText: '选择年月 (Control+Up/Down移动到年份)',
    //</locale>

    //<locale>
    /**
    * @cfg {String} monthYearFormat
    * The date format for the header month
    */
    monthYearFormat: 'F Y',
    //</locale>

    //<locale>
    /**
    * @cfg {Number} [startDay=undefined]
    * Day index at which the week should begin, 0-based.
    *
    * Defaults to `0` (Sunday).
    */
    startDay: 0,
    //</locale>

    //<locale>
    /**
    * @cfg {Boolean} showToday
    * False to hide the footer area containing the Today button and disable the keyboard handler for spacebar that
    * selects the current date.
    */
    showToday: true,
    //</locale>

    /**
    * @cfg {Date} [minDate=null]
    * Minimum allowable date (JavaScript date object)
    */

    /**
    * @cfg {Date} [maxDate=null]
    * Maximum allowable date (JavaScript date object)
    */

    /**
    * @cfg {Number[]} [disabledDays=null]
    * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday.
    */

    /**
    * @cfg {RegExp} [disabledDatesRE=null]
    * JavaScript regular expression used to disable a pattern of dates. The {@link #disabledDates}
    * config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the
    * disabledDates value.
    */

    /**
    * @cfg {String[]} disabledDates
    * An array of 'dates' to disable, as strings. These strings will be used to build a dynamic regular expression so
    * they are very powerful. Some examples:
    *
    *   - ['03/08/2003', '09/16/2003'] would disable those exact dates
    *   - ['03/08', '09/16'] would disable those days for every year
    *   - ['^03/08'] would only match the beginning (useful if you are using short years)
    *   - ['03/../2006'] would disable every day in March 2006
    *   - ['^03'] would disable every day in every March
    *
    * Note that the format of the dates included in the array should exactly match the {@link #format} config. In order
    * to support regular expressions, if you are using a date format that has '.' in it, you will have to escape the
    * dot when restricting dates. For example: ['03\\.08\\.03'].
    */

    /**
    * @cfg {Boolean} disableAnim
    * True to disable animations when showing the month picker.
    */
    disableAnim: false,

    /**
    * @cfg {String} [baseCls='x-datepicker']
    * The base CSS class to apply to this components element.
    */
    baseCls: Ext.baseCSSPrefix + 'datepicker',

    /**
    * @cfg {String} [selectedCls='x-datepicker-selected']
    * The class to apply to the selected cell.
    */

    /**
    * @cfg {String} [disabledCellCls='x-datepicker-disabled']
    * The class to apply to disabled cells.
    */

    //<locale>
    /**
    * @cfg {String} longDayFormat
    * The format for displaying a date in a longer format.
    */
    longDayFormat: 'F d, Y',
    //</locale>

    /**
    * @cfg {Object} keyNavConfig
    * Specifies optional custom key event handlers for the {@link Ext.util.KeyNav} attached to this date picker. Must
    * conform to the config format recognized by the {@link Ext.util.KeyNav} constructor. Handlers specified in this
    * object will replace default handlers of the same name.
    */

    /**
    * @cfg {String}
    * The {@link Ext.button.Button#ui} to use for the date picker's footer buttons.
    */
    footerButtonUI: 'default',

    isDatePicker: true,

    ariaRole: 'region',
    focusable: true,

    childEls: [
        'innerEl', 'eventEl', 'prevEl', 'nextEl', 'middleBtnEl', 'footerEl'
    ],

    border: true,

    /**
    * @cfg
    * @inheritdoc
    */
    renderTpl: [
        '<div id="{id}-innerEl" data-ref="innerEl" role="presentation">',
            '<div class="{baseCls}-header">',
                '<div id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-prev {baseCls}-arrow" role="presentation" title="{prevText}"></div>',
                '<div id="{id}-middleBtnEl" data-ref="middleBtnEl" class="{baseCls}-month" role="heading">{%this.renderMonthBtn(values, out)%}</div>',
                '<div id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-next {baseCls}-arrow" role="presentation" title="{nextText}"></div>',
            '</div>',
            '<table role="grid" id="{id}-eventEl" data-ref="eventEl" class="{baseCls}-inner" cellspacing="0" tabindex="0">',
                '<thead>',
                    '<tr role="row">',
                        '<tpl for="dayNames">',
                            '<th role="columnheader" class="{parent.baseCls}-column-header" aria-label="{.}">',
                                '<div role="presentation" class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',
                            '</th>',
                        '</tpl>',
                    '</tr>',
                '</thead>',
                '<tbody>',
                    '<tr role="row">',
                        '<tpl for="days">',
                            '{#:this.isEndOfWeek}',
                            '<td role="gridcell">',
                                '<div hidefocus="on" class="{parent.baseCls}-date"></div>',
                            '</td>',
                        '</tpl>',
                    '</tr>',
                '</tbody>',
            '</table>',
            '<tpl if="showToday">',
    //'<div id="{id}-footerEl" data-ref="footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>',
              '<div  id="{id}-footerEl" role="presentation" class="{baseCls}-footer">{%this.renderHour(values, out)%}{%this.renderMinute(values, out)%}{%this.renderSecond(values, out)%}<center>{%this.renderOkQueDingBtn(values, out)%}&nbsp;&nbsp;{%this.renderTodayBtn(values, out)%}&nbsp;&nbsp;{%this.renderClearBtn(values, out)%}</center></div>',
            '</tpl>',
    // These elements are used with Assistive Technologies such as screen readers
            '<div id="{id}-todayText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{todayText}.</div>',
            '<div id="{id}-todayText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{okText}.</div>',
            '<div id="{id}-ariaMinText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaMinText}.</div>',
            '<div id="{id}-ariaMaxText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaMaxText}.</div>',
            '<div id="{id}-ariaDisabledDaysText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaDisabledDaysText}.</div>',
            '<div id="{id}-ariaDisabledDatesText" class="' + Ext.baseCSSPrefix + 'hidden-clip">{ariaDisabledDatesText}.</div>',
        '</div>',
        {
            firstInitial: function (value) {
                return Ext.picker.Date.prototype.getDayInitial(value);
            },
            isEndOfWeek: function (value) {
                // convert from 1 based index to 0 based
                // by decrementing value once.
                value--;
                var end = value % 7 === 0 && value !== 0;
                return end ? '</tr><tr role="row">' : '';
            },
            longDay: function (value) {
                return Ext.Date.format(value, this.longDayFormat);
            },
            renderHour: function (values, out) {
                out.push('<div  style="float : left;margin:8px 5px 0 5px;">时间:</div>');
                Ext.DomHelper.generateMarkup(values.$comp.hour.getRenderTree(), out);
            },
            renderMinute: function (values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.minute.getRenderTree(), out);
            },
            renderSecond: function (values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.second.getRenderTree(), out);
            },
            renderOkQueDingBtn: function (values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.okQueDingBtn.getRenderTree(), out);
            },
            renderTodayBtn: function (values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
            },
            renderMonthBtn: function (values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
            },
            renderClearBtn: function (values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.clearBtn.getRenderTree(), out);
            }
        }
    ],

    // Default value used to initialise each date in the DatePicker.
    // __Note:__ 12 noon was chosen because it steers well clear of all DST timezone changes.
    initHour: 12, // 24-hour format

    numDays: 42,

    /**
    * @event select
    * Fires when a date is selected
    * @param {Ext.picker.Date} this DatePicker
    * @param {Date} date The selected date
    */

    /**
    * @private
    * @inheritdoc
    */
    initComponent: function () {
        var me = this,
            clearTime = Ext.Date.clearTime;

        me.selectedCls = me.baseCls + '-selected';
        me.disabledCellCls = me.baseCls + '-disabled';
        me.prevCls = me.baseCls + '-prevday';
        me.activeCls = me.baseCls + '-active';
        me.cellCls = me.baseCls + '-cell';
        me.nextCls = me.baseCls + '-prevday';
        me.todayCls = me.baseCls + '-today';


        if (!me.format) {
            me.format = Ext.Date.defaultFormat;
        }
        if (!me.dayNames) {
            me.dayNames = Ext.Date.dayNames;
        }
        me.dayNames = me.dayNames.slice(me.startDay).concat(me.dayNames.slice(0, me.startDay));

        me.callParent();

        me.value = me.value ? clearTime(me.value, true) : clearTime(new Date());

        me.initDisabledDays();
    },

    // Keep the tree structure correct for Ext.form.field.Picker input fields which poke a 'pickerField' reference down into their pop-up pickers.
    getRefOwner: function () {
        return this.pickerField || this.callParent();
    },

    getRefItems: function () {
        var results = [],
            monthBtn = this.monthBtn,
            todayBtn = this.todayBtn;

        if (monthBtn) {
            results.push(monthBtn);
        }

        if (todayBtn) {
            results.push(todayBtn);
        }

        return results;
    },

    beforeRender: function () {
        /*
        * days array for looping through 6 full weeks (6 weeks * 7 days)
        * Note that we explicitly force the size here so the template creates
        * all the appropriate cells.
        */
        var me = this,
            encode = Ext.String.htmlEncode,
            days = new Array(me.numDays),
            today = Ext.Date.format(new Date(), me.format);

        if (me.padding && !me.width) {
            me.cacheWidth();
        }

        me.monthBtn = new Ext.button.Split({
            ownerCt: me,
            ownerLayout: me.getComponentLayout(),
            text: '',
            tooltip: me.monthYearText,
            tabIndex: -1,
            ariaRole: 'presentation',
            listeners: {
                click: me.doShowMonthPicker,
                arrowclick: me.doShowMonthPicker,
                scope: me
            }
        });

        me.hour = Ext.create('Ext.form.field.Number', {
            scope: me,
            ownerCt: me,
            editable: true,
            ownerLayout: me.getComponentLayout(),
            minValue: 0,
            maxValue: 23,
            margin: "5px 0",
            width: 55,
            style: { float: "left" },
            enableKeyEvents: true,
            listeners: {
                keyup: function (field, e) {
                    if (field.getValue() > 23) {
                        e.stopEvent();
                        field.setValue(23);
                    }
                }
            }
        });

        me.minute = Ext.create('Ext.form.field.Number', {
            scope: me,
            ownerCt: me,
            style: { float: "left" },
            ownerLayout: me.getComponentLayout(),
            minValue: 0,
            maxValue: 59,
            margin: "5px 0",
            editable: true,
            width: 55,
            enableKeyEvents: true,
            listeners: {
                keyup: function (field, e) {
                    if (field.getValue() > 59) {
                        e.stopEvent();
                        field.setValue(59);
                    }
                }
            }
        });

        me.second = Ext.create('Ext.form.field.Number', {
            scope: me,
            ownerCt: me,
            editable: true,
            style: { float: "left" },
            ownerLayout: me.getComponentLayout(),
            minValue: 0,
            maxValue: 59,
            margin: "5px 0",
            width: 55,
            enableKeyEvents: true,
            listeners: {
                keyup: function (field, e) {
                    if (field.getValue() > 59) {
                        e.stopEvent();
                        field.setValue(59);
                    }
                }
            }
        });
        me.okQueDingBtn = new Ext.button.Button({
            ownerCt: me,
            ownerLayout: me.getComponentLayout(),
            text: me.okText,
            tooltip: me.okTip,
            tooltipType: 'title',
            handler: me.okQueDingHandler, //确认按钮的事件委托  
            scope: me
        });
        if (me.showToday) {
            me.todayBtn = new Ext.button.Button({
                ui: me.footerButtonUI,
                ownerCt: me,
                ownerLayout: me.getComponentLayout(),
                text: Ext.String.format(me.todayText, today),
                tooltip: Ext.String.format(me.todayTip, today),
                tooltipType: 'title',
                tabIndex: -1,
                ariaRole: 'presentation',
                handler: me.selectToday,
                scope: me
            });
        }

        me.clearBtn = new Ext.button.Button({
            ownerCt: me,
            ownerLayout: me.getComponentLayout(),
            text: me.clearText,
            tooltip: me.clearTip,
            tooltipType: 'title',
            handler: me.clearBtnHandler, //确认按钮的事件委托  
            scope: me
        });

        me.callParent();

        Ext.applyIf(me, {
            renderData: {}
        });

        Ext.apply(me.renderData, {
            dayNames: me.dayNames,
            showToday: me.showToday,
            prevText: encode(me.prevText),
            nextText: encode(me.nextText),
            todayText: encode(me.todayText),
            ariaMinText: encode(me.ariaMinText),
            ariaMaxText: encode(me.ariaMaxText),
            ariaDisabledDaysText: encode(me.ariaDisabledDaysText),
            ariaDisabledDatesText: encode(me.ariaDisabledDatesText),
            days: days
        });

        me.protoEl.unselectable();
    },

    cacheWidth: function () {
        var me = this,
            padding = me.parseBox(me.padding),
            widthEl = Ext.getBody().createChild({
                cls: me.baseCls + ' ' + me.borderBoxCls,
                style: 'position:absolute;top:-1000px;left:-1000px;'
            });

        me.self.prototype.width = widthEl.getWidth() + padding.left + padding.right;
        widthEl.destroy();
    },

    /**
    * @inheritdoc
    * @private
    */
    onRender: function (container, position) {
        var me = this;

        me.callParent(arguments);

        me.cells = me.eventEl.select('tbody td');
        me.textNodes = me.eventEl.query('tbody td div');

        me.eventEl.set({ 'aria-labelledby': me.monthBtn.id });

        me.mon(me.eventEl, {
            scope: me,
            mousewheel: me.handleMouseWheel,
            click: {
                fn: me.handleDateClick,
                delegate: 'div.' + me.baseCls + '-date'
            }
        });

    },

    /**
    * @inheritdoc
    * @private
    */
    initEvents: function () {
        var me = this,
            pickerField = me.pickerField,
            eDate = Ext.Date,
            day = eDate.DAY;

        me.callParent();

        // If we're part of a date field, don't allow us to focus, the field will
        // handle that. If we are standalone, then allow the default behaviour
        // to occur to receive focus
        if (pickerField) {
            me.el.on('mousedown', me.onMouseDown, me);
        }

        me.prevRepeater = new Ext.util.ClickRepeater(me.prevEl, {
            handler: me.showPrevMonth,
            scope: me,
            preventDefault: true,
            stopDefault: true
        });

        me.nextRepeater = new Ext.util.ClickRepeater(me.nextEl, {
            handler: me.showNextMonth,
            scope: me,
            preventDefault: true,
            stopDefault: true
        });

        me.keyNav = new Ext.util.KeyNav(me.eventEl, Ext.apply({
            scope: me,

            left: function (e) {
                if (e.ctrlKey) {
                    me.showPrevMonth();
                } else {
                    me.update(eDate.add(me.activeDate, day, -1));
                }
            },

            right: function (e) {
                if (e.ctrlKey) {
                    me.showNextMonth();
                } else {
                    me.update(eDate.add(me.activeDate, day, 1));
                }
            },

            up: function (e) {
                if (e.ctrlKey) {
                    me.showNextYear();
                } else {
                    me.update(eDate.add(me.activeDate, day, -7));
                }
            },

            down: function (e) {
                if (e.ctrlKey) {
                    me.showPrevYear();
                } else {
                    me.update(eDate.add(me.activeDate, day, 7));
                }
            },

            pageUp: function (e) {
                if (e.ctrlKey) {
                    me.showPrevYear();
                } else {
                    me.showPrevMonth();
                }
            },

            pageDown: function (e) {
                if (e.ctrlKey) {
                    me.showNextYear();
                } else {
                    me.showNextMonth();
                }
            },

            tab: function (e) {
                // When the picker is floating and attached to an input field, its
                // 'select' handler will focus the inputEl so when navigation happens
                // it does so as if the input field was focused all the time.
                // This is the desired behavior and we try not to interfere with it
                // in the picker itself, see below.
                me.handleTabClick(e);

                // Allow default behaviour of TAB - it MUST be allowed to navigate.
                return true;
            },

            enter: function (e) {
                me.handleDateClick(e, me.activeCell.firstChild);
            },

            space: function () {
                me.setValue(new Date(me.activeCell.firstChild.dateValue));
                var startValue = me.startValue,
                    value = me.value,
                    pickerValue;

                if (pickerField) {
                    pickerValue = pickerField.getValue();
                    if (pickerValue && startValue && pickerValue.getTime() === value.getTime()) {
                        pickerField.setValue(startValue);
                    } else {
                        pickerField.setValue(value);
                    }
                }
            },

            home: function (e) {
                me.update(eDate.getFirstDateOfMonth(me.activeDate));
            },

            end: function (e) {
                me.update(eDate.getLastDateOfMonth(me.activeDate));
            }
        }, me.keyNavConfig));

        if (me.disabled) {
            me.syncDisabled(true);
        }
        me.update(me.value);
    },

    onMouseDown: function (e) {
        e.preventDefault();
    },

    handleTabClick: function (e) {
        var me = this,
            t = me.getSelectedDate(me.activeDate),
            handler = me.handler;

        // The following code is like handleDateClick without the e.stopEvent()
        if (!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)) {
            me.setValue(new Date(t.dateValue));
            me.fireEvent('select', me, me.value);
            if (handler) {
                handler.call(me.scope || me, me, me.value);
            }
            me.onSelect();
        }
    },

    getSelectedDate: function (date) {
        var me = this,
            t = date.getTime(),
            cells = me.cells,
            cls = me.selectedCls,
            cellItems = cells.elements,
            cLen = cellItems.length,
            cell, c;

        cells.removeCls(cls);

        for (c = 0; c < cLen; c++) {
            cell = cellItems[c].firstChild;
            if (cell.dateValue === t) {
                return cell;
            }
        }
        return null;
    },

    /**
    * Setup the disabled dates regex based on config options
    * @private
    */
    initDisabledDays: function () {
        var me = this,
            dd = me.disabledDates,
            re = '(?:',
            len,
            d, dLen, dI;

        if (!me.disabledDatesRE && dd) {
            len = dd.length - 1;

            dLen = dd.length;

            for (d = 0; d < dLen; d++) {
                dI = dd[d];

                re += Ext.isDate(dI) ? '^' + Ext.String.escapeRegex(Ext.Date.dateFormat(dI, me.format)) + '$' : dI;
                if (d !== len) {
                    re += '|';
                }
            }

            me.disabledDatesRE = new RegExp(re + ')');
        }
    },

    /**
    * Replaces any existing disabled dates with new values and refreshes the DatePicker.
    * @param {String[]/RegExp} disabledDates An array of date strings (see the {@link #disabledDates} config for
    * details on supported values), or a JavaScript regular expression used to disable a pattern of dates.
    * @return {Ext.picker.Date} this
    */
    setDisabledDates: function (dd) {
        var me = this;

        if (Ext.isArray(dd)) {
            me.disabledDates = dd;
            me.disabledDatesRE = null;
        } else {
            me.disabledDatesRE = dd;
        }
        me.initDisabledDays();
        me.update(me.value, true);
        return me;
    },

    /**
    * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
    * @param {Number[]} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config for details
    * on supported values.
    * @return {Ext.picker.Date} this
    */
    setDisabledDays: function (dd) {
        this.disabledDays = dd;
        return this.update(this.value, true);
    },

    /**
    * Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker.
    * @param {Date} value The minimum date that can be selected
    * @return {Ext.picker.Date} this
    */
    setMinDate: function (dt) {
        this.minDate = dt;
        return this.update(this.value, true);
    },

    /**
    * Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker.
    * @param {Date} value The maximum date that can be selected
    * @return {Ext.picker.Date} this
    */
    setMaxDate: function (dt) {
        this.maxDate = dt;
        return this.update(this.value, true);
    },

    /**
    * Sets the value of the date field
    * @param {Date} value The date to set
    * @return {Ext.picker.Date} this
    */
    setValue: function (value) {
        // If passed a null value just pass in a new date object.
        this.value = Ext.Date.clearTime(value || new Date(), true);
        return this.update(this.value);
    },

    /**
    * Gets the current selected value of the date field
    * @return {Date} The selected date
    */
    getValue: function () {
        return this.value;
    },

    //<locale type="function">
    /**
    * Gets a single character to represent the day of the week
    * @return {String} The character
    */
    getDayInitial: function (value) {
        return value.substr(0, 1);
    },
    //</locale>

    /**
    * @inheritdoc
    * @private
    */
    onEnable: function () {
        var me = this;

        me.callParent();
        me.syncDisabled(false);
        me.update(me.activeDate);

    },

    /**
    * @inheritdoc
    * @private
    */
    onShow: function () {
        var me = this;

        me.callParent();
        me.syncDisabled(false);
        if (me.pickerField) {
            me.startValue = me.pickerField.getValue();
        }
    },

    /**
    * @inheritdoc
    * @private
    */
    onHide: function () {
        this.callParent();
        this.syncDisabled(true);
    },

    /**
    * @inheritdoc
    * @private
    */
    onDisable: function () {
        this.callParent();
        this.syncDisabled(true);
    },

    /**
    * Get the current active date.
    * @private
    * @return {Date} The active date
    */
    getActive: function () {
        return this.activeDate || this.value;
    },

    /**
    * Run any animation required to hide/show the month picker.
    * @private
    * @param {Boolean} isHide True if it's a hide operation
    */
    runAnimation: function (isHide) {
        var picker = this.monthPicker,
            options = {
                duration: 200,
                callback: function () {
                    picker.setVisible(!isHide);
                }
            };

        if (isHide) {
            picker.el.slideOut('t', options);
        } else {
            picker.el.slideIn('t', options);
        }
    },

    /**
    * Hides the month picker, if it's visible.
    * @param {Boolean} [animate] Indicates whether to animate this action. If the animate
    * parameter is not specified, the behavior will use {@link #disableAnim} to determine
    * whether to animate or not.
    * @return {Ext.picker.Date} this
    */
    hideMonthPicker: function (animate) {
        var me = this,
            picker = me.monthPicker;

        if (picker && picker.isVisible()) {
            if (me.shouldAnimate(animate)) {
                me.runAnimation(true);
            } else {
                picker.hide();
            }
        }
        return me;
    },

    doShowMonthPicker: function () {
        // Wrap in an extra call so we can prevent the button
        // being passed as an animation parameter.
        this.showMonthPicker();
    },

    doHideMonthPicker: function () {
        // Wrap in an extra call so we can prevent this
        // being passed as an animation parameter
        this.hideMonthPicker();
    },

    /**
    * Show the month picker
    * @param {Boolean} [animate] Indicates whether to animate this action. If the animate
    * parameter is not specified, the behavior will use {@link #disableAnim} to determine
    * whether to animate or not.
    * @return {Ext.picker.Date} this
    */
    showMonthPicker: function (animate) {
        var me = this,
            el = me.el,
            picker;

        if (me.rendered && !me.disabled) {
            picker = me.createMonthPicker();
            if (!picker.isVisible()) {
                picker.setValue(me.getActive());
                picker.setSize(el.getSize());

                // Null out floatParent so that the [-1, -1] position is not made relative to this
                picker.floatParent = null;
                picker.setPosition(-el.getBorderWidth('l'), -el.getBorderWidth('t'));
                if (me.shouldAnimate(animate)) {
                    me.runAnimation(false);
                } else {
                    picker.show();
                }
            }
        }
        return me;
    },

    /**
    * Checks whether a hide/show action should animate
    * @private
    * @param {Boolean} [animate] A possible animation value
    * @return {Boolean} Whether to animate the action
    */
    shouldAnimate: function (animate) {
        return Ext.isDefined(animate) ? animate : !this.disableAnim;
    },

    /**
    * Create the month picker instance
    * @private
    * @return {Ext.picker.Month} picker
    */
    createMonthPicker: function () {
        var me = this,
            picker = me.monthPicker;

        if (!picker) {
            me.monthPicker = picker = new Ext.picker.Month({
                renderTo: me.el,
                // We need to set the ownerCmp so that owns() can correctly
                // match up the component hierarchy so that focus does not leave
                // an owning picker field if/when this gets focus.
                ownerCmp: me,
                floating: true,
                padding: me.padding,
                shadow: false,
                small: me.showToday === false,
                footerButtonUI: me.footerButtonUI,
                listeners: {
                    scope: me,
                    cancelclick: me.onCancelClick,
                    okclick: me.onOkClick,
                    yeardblclick: me.onOkClick,
                    monthdblclick: me.onOkClick
                }
            });
            if (!me.disableAnim) {
                // hide the element if we're animating to prevent an initial flicker
                picker.el.setStyle('display', 'none');
            }
            picker.hide();
            me.on('beforehide', me.doHideMonthPicker, me);
        }
        return picker;
    },

    /**
    * Respond to an ok click on the month picker
    * @private
    */
    onOkClick: function (picker, value) {
        var me = this,
            month = value[0],
            year = value[1],
            date = new Date(year, month, me.getActive().getDate());

        if (date.getMonth() !== month) {
            // 'fix' the JS rolling date conversion if needed
            date = Ext.Date.getLastDateOfMonth(new Date(year, month, 1));
        }
        me.setValue(date);
        me.hideMonthPicker();
    },

    /**
    * Respond to a cancel click on the month picker
    * @private
    */
    onCancelClick: function () {
        this.selectedUpdate(this.activeDate);
        this.hideMonthPicker();
    },

    /**
    * Show the previous month.
    * @param {Object} e
    * @return {Ext.picker.Date} this
    */
    showPrevMonth: function (e) {
        return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.MONTH, -1));
    },

    /**
    * Show the next month.
    * @param {Object} e
    * @return {Ext.picker.Date} this
    */
    showNextMonth: function (e) {
        return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.MONTH, 1));
    },

    /**
    * Show the previous year.
    * @return {Ext.picker.Date} this
    */
    showPrevYear: function () {
        return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.YEAR, -1));
    },

    /**
    * Show the next year.
    * @return {Ext.picker.Date} this
    */
    showNextYear: function () {
        return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.YEAR, 1));
    },

    /**
    * Respond to the mouse wheel event
    * @private
    * @param {Ext.event.Event} e
    */
    handleMouseWheel: function (e) {
        e.stopEvent();
        if (!this.disabled) {
            var delta = e.getWheelDelta();
            if (delta > 0) {
                this.showPrevMonth();
            } else if (delta < 0) {
                this.showNextMonth();
            }
        }
    },

    /**
    * Respond to a date being clicked in the picker
    * @private
    * @param {Ext.event.Event} e
    * @param {HTMLElement} t
    */
    handleDateClick: function (e, t) {
        var me = this,
            handler = me.handler;
        e.stopEvent();
        if (!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)) {
            me.setValue(new Date(t.dateValue));
            me.fireEvent('select', me, me.value);
            if (handler) {
                handler.call(me.scope || me, me, me.value);
            }
            me.onSelect();
        }
    },

    /**
    * Perform any post-select actions
    * @private
    */
    onSelect: function () {
        if (this.hideOnSelect) {
            this.hide();
        }
    },

    /**
    * Sets the current value to today.
    * @return {Ext.picker.Date} this
    */
    selectToday: function () {
        var me = this,
            btn = me.todayBtn,
            handler = me.handler;

        if (btn && !btn.disabled) {
            me.setValue(Ext.Date.clearTime(new Date()));
            me.fireEvent('select', me, me.value);
            if (handler) {
                handler.call(me.scope || me, me, me.value);
            }
            me.onSelect();
        }
        return me;
    },

    /**
    * Update the selected cell
    * @private
    * @param {Date} date The new date
    */
    selectedUpdate: function (date) {
        var me = this,
            t = date.getTime(),
            cells = me.cells,
            cls = me.selectedCls,
            c,
            cLen = cells.getCount(),
            cell;

        me.eventEl.dom.setAttribute('aria-busy', 'true');

        cell = me.activeCell;

        if (cell) {
            Ext.fly(cell).removeCls(cls);
            cell.setAttribute('aria-selected', false);
        }

        for (c = 0; c < cLen; c++) {
            cell = cells.item(c);

            if (me.textNodes[c].dateValue === t) {
                me.activeCell = cell.dom;
                me.eventEl.dom.setAttribute('aria-activedescendant', cell.dom.id);
                cell.dom.setAttribute('aria-selected', true);
                cell.addCls(cls);
                me.fireEvent('highlightitem', me, cell);
                break;
            }
        }

        me.eventEl.dom.removeAttribute('aria-busy');
    },

    /**
    * Update the contents of the picker for a new month
    * @private
    * @param {Date} date The new date
    */
    fullUpdate: function (date) {
        var me = this,
            cells = me.cells.elements,
            textNodes = me.textNodes,
            disabledCls = me.disabledCellCls,
            eDate = Ext.Date,
            i = 0,
            extraDays = 0,
            newDate = +eDate.clearTime(date, true),
            today = +eDate.clearTime(new Date()),
            min = me.minDate ? eDate.clearTime(me.minDate, true) : Number.NEGATIVE_INFINITY,
            max = me.maxDate ? eDate.clearTime(me.maxDate, true) : Number.POSITIVE_INFINITY,
            ddMatch = me.disabledDatesRE,
            ddText = me.disabledDatesText,
            ddays = me.disabledDays ? me.disabledDays.join('') : false,
            ddaysText = me.disabledDaysText,
            format = me.format,
            days = eDate.getDaysInMonth(date),
            firstOfMonth = eDate.getFirstDateOfMonth(date),
            startingPos = firstOfMonth.getDay() - me.startDay,
            previousMonth = eDate.add(date, eDate.MONTH, -1),
            ariaTitleDateFormat = me.ariaTitleDateFormat,
            prevStart, current, disableToday, tempDate, setCellClass, html, cls,
            formatValue, value;

        if (startingPos < 0) {
            startingPos += 7;
        }

        days += startingPos;
        prevStart = eDate.getDaysInMonth(previousMonth) - startingPos;
        current = new Date(previousMonth.getFullYear(), previousMonth.getMonth(), prevStart, me.initHour);

        if (me.showToday) {
            tempDate = eDate.clearTime(new Date());
            disableToday = (tempDate < min || tempDate > max ||
                (ddMatch && format && ddMatch.test(eDate.dateFormat(tempDate, format))) ||
                (ddays && ddays.indexOf(tempDate.getDay()) !== -1));

            if (!me.disabled) {
                me.todayBtn.setDisabled(disableToday);
            }
        }

        setCellClass = function (cellIndex, cls) {
            var cell = cells[cellIndex],
                describedBy = [];

            // Cells are not rendered with ids
            if (!cell.hasAttribute('id')) {
                cell.setAttribute('id', me.id + '-cell-' + cellIndex);
            }

            // store dateValue number as an expando
            value = +eDate.clearTime(current, true);
            cell.firstChild.dateValue = value;

            cell.setAttribute('aria-label', eDate.format(current, ariaTitleDateFormat));

            // Here and below we can't use title attribute instead of data-qtip
            // because JAWS will announce title value before cell content
            // which is not what we need. Also we are using aria-describedby attribute
            // and not placing the text in aria-label because some cells may have
            // compound descriptions (like Today and Disabled day).
            cell.removeAttribute('aria-describedby');
            cell.removeAttribute('data-qtip');

            if (value === today) {
                cls += ' ' + me.todayCls;
                describedBy.push(me.id + '-todayText');
            }

            if (value === newDate) {
                me.activeCell = cell;
                me.eventEl.dom.setAttribute('aria-activedescendant', cell.id);
                cell.setAttribute('aria-selected', true);
                cls += ' ' + me.selectedCls;
                me.fireEvent('highlightitem', me, cell);
            }
            else {
                cell.setAttribute('aria-selected', false);
            }

            if (value < min) {
                cls += ' ' + disabledCls;
                describedBy.push(me.id + '-ariaMinText');
                cell.setAttribute('data-qtip', me.minText);
            }
            else if (value > max) {
                cls += ' ' + disabledCls;
                describedBy.push(me.id + '-ariaMaxText');
                cell.setAttribute('data-qtip', me.maxText);
            }
            else if (ddays && ddays.indexOf(current.getDay()) !== -1) {
                cell.setAttribute('data-qtip', ddaysText);
                describedBy.push(me.id + '-ariaDisabledDaysText');
                cls += ' ' + disabledCls;
            }
            else if (ddMatch && format) {
                formatValue = eDate.dateFormat(current, format);
                if (ddMatch.test(formatValue)) {
                    cell.setAttribute('data-qtip', ddText.replace('%0', formatValue));
                    describedBy.push(me.id + '-ariaDisabledDatesText');
                    cls += ' ' + disabledCls;
                }
            }

            if (describedBy.length) {
                cell.setAttribute('aria-describedby', describedBy.join(' '));
            }

            cell.className = cls + ' ' + me.cellCls;
        };

        me.eventEl.dom.setAttribute('aria-busy', 'true');

        for (; i < me.numDays; ++i) {
            if (i < startingPos) {
                html = (++prevStart);
                cls = me.prevCls;
            } else if (i >= days) {
                html = (++extraDays);
                cls = me.nextCls;
            } else {
                html = i - startingPos + 1;
                cls = me.activeCls;
            }
            textNodes[i].innerHTML = html;
            current.setDate(current.getDate() + 1);
            setCellClass(i, cls);
        }

        me.eventEl.dom.removeAttribute('aria-busy');

        me.monthBtn.setText(Ext.Date.format(date, me.monthYearFormat));
    },

    /**
    * Update the contents of the picker
    * @private
    * @param {Date} date The new date
    * @param {Boolean} forceRefresh True to force a full refresh
    */
    update: function (date, forceRefresh) {
        var me = this,
            active = me.activeDate;
        //添加时间相关
        date.setHours(me.hour.getValue());
        date.setMinutes(me.minute.getValue());
        date.setSeconds(me.second.getValue());

        if (me.rendered) {
            me.activeDate = date;
            if (!forceRefresh && active && me.el &&
                    active.getMonth() === date.getMonth() &&
                    active.getFullYear() === date.getFullYear()) {
                me.selectedUpdate(date, active);
            } else {
                me.fullUpdate(date, active);
            }
        }
        return me;
    },
    /** 
    * 确认 按钮触发的调用 
    */
    okQueDingHandler: function () {
        var me = this,
            btn = me.okQueDingBtn;

        if (btn && !btn.disabled) {
            me.setValue(this.getValue());
            me.fireEvent('select', me, me.value);
            me.onSelect();
        }
        return me;
    },
    /** 
    * 清除按钮触发的调用 
    */
    clearBtnHandler: function () {
        var me = this,
        btn = me.clearBtn;
        if (btn && !btn.disabled) {
            me.setValue('');
            me.fireEvent('clear', me, me.value);
            me.onSelect();
        }
        return me;
    },
    /**
    * @private
    * @inheritdoc
    */
    beforeDestroy: function () {
        var me = this;

        if (me.rendered) {
            Ext.destroy(
                me.keyNav,
                me.monthPicker,
                me.monthBtn,
                me.nextRepeater,
                me.prevRepeater,
                me.todayBtn,
                me.okQueDingBtn,
                me.clearBtn,
                me.todayElSpan
            );
            delete me.textNodes;
            delete me.cells.elements;
        }
        me.callParent();
    },

    privates: {
        // Do the job of a container layout at this point even though we are not a Container.
        // TODO: Refactor as a Container.
        finishRenderChildren: function () {
            var me = this;

            me.callParent();
            me.monthBtn.finishRender();
            me.okQueDingBtn.finishRender();
            me.clearBtn.finishRender();
            if (me.showToday) {
                me.todayBtn.finishRender();
            }
            //添加时间相关
            this.hour.finishRender();
            this.minute.finishRender();
            this.second.finishRender();
        },

        getFocusEl: function () {
            return this.eventEl;
        },

        /**
        * Set the disabled state of various internal components
        * @param {Boolean} disabled
        * @private
        */
        syncDisabled: function (disabled) {
            var me = this,
                keyNav = me.keyNav;

            // If we have one, we have all
            if (keyNav) {
                keyNav.setDisabled(disabled);
                me.prevRepeater.setDisabled(disabled);
                me.nextRepeater.setDisabled(disabled);
                if (me.todayBtn) {
                    me.todayBtn.setDisabled(disabled);
                }
            }
        }
    }
});

/**
* @docauthor Jason Johnston <jason@sencha.com>
* @修改人 Sgai 李强
* Provides a date input field with a {@link Ext.picker.Date date picker} dropdown and automatic date
* validation.
*
* This field recognizes and uses the JavaScript Date object as its main {@link #value} type. In addition,
* it recognizes string values which are parsed according to the {@link #format} and/or {@link #altFormats}
* configs. These may be reconfigured to use date formats appropriate for the user's locale.
*
* The field may be limited to a certain range of dates by using the {@link #minValue}, {@link #maxValue},
* {@link #disabledDays}, and {@link #disabledDates} config parameters. These configurations will be used both
* in the field's validation, and in the date picker dropdown by preventing invalid dates from being selected.
*
* # Example usage
*
*     @example
*     Ext.create('Ext.form.Panel', {
*         renderTo: Ext.getBody(),
*         width: 300,
*         bodyPadding: 10,
*         title: 'Dates',
*         items: [{
*             xtype: 'datefield',
*             anchor: '100%',
*             fieldLabel: 'From',
*             name: 'from_date',
*             maxValue: new Date()  // limited to the current date or prior
*         }, {
*             xtype: 'datefield',
*             anchor: '100%',
*             fieldLabel: 'To',
*             name: 'to_date',
*             value: new Date()  // defaults to today
*         }]
*     });
*
* # Date Formats Examples
*
* This example shows a couple of different date format parsing scenarios. Both use custom date format
* configurations; the first one matches the configured `format` while the second matches the `altFormats`.
*
*     @example
*     Ext.create('Ext.form.Panel', {
*         renderTo: Ext.getBody(),
*         width: 300,
*         bodyPadding: 10,
*         title: 'Dates',
*         items: [{
*             xtype: 'datefield',
*             anchor: '100%',
*             fieldLabel: 'Date',
*             name: 'date',
*             // The value matches the format; will be parsed and displayed using that format.
*             format: 'm d Y',
*             value: '2 4 1978'
*         }, {
*             xtype: 'datefield',
*             anchor: '100%',
*             fieldLabel: 'Date',
*             name: 'date',
*             // The value does not match the format, but does match an altFormat; will be parsed
*             // using the altFormat and displayed using the format.
*             format: 'm d Y',
*             altFormats: 'm,d,Y|m.d.Y',
*             value: '2.4.1978'
*         }]
*     });
*/
Ext.define('Ext.ux.DateTimeField', {
    extend: 'Ext.form.field.Picker',
    alias: 'widget.datetimefield',
    requires: ['Ext.ux.DateTimePicker'],

    //<locale>
    /**
    * @cfg {String} format
    * The default date format string which can be overriden for localization support. The format must be valid
    * according to {@link Ext.Date#parse}.
    */
    format: "m/d/Y",
    //</locale>
    //<locale>
    /**
    * @cfg {String} altFormats
    * Multiple date formats separated by "|" to try when parsing a user input value and it does not match the defined
    * format.
    */
    altFormats: "m/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d|n-j|n/j",
    //</locale>
    //<locale>
    /**
    * @cfg {String} disabledDaysText
    * The tooltip to display when the date falls on a disabled day.
    */
    disabledDaysText: "Disabled",
    //</locale>
    //<locale>
    /**
    * @cfg {String} disabledDatesText
    * The tooltip text to display when the date falls on a disabled date.
    */
    disabledDatesText: "Disabled",
    //</locale>
    //<locale>
    /**
    * @cfg {String} minText
    * The error text to display when the date in the cell is before {@link #minValue}.
    */
    minText: "The date in this field must be equal to or after {0}",
    //</locale>
    //<locale>
    /**
    * @cfg {String} maxText
    * The error text to display when the date in the cell is after {@link #maxValue}.
    */
    maxText: "The date in this field must be equal to or before {0}",
    //</locale>
    //<locale>
    /**
    * @cfg {String} invalidText
    * The error text to display when the date in the field is invalid.
    */
    invalidText: "{0} is not a valid date - it must be in the format {1}",
    //</locale>
    /**
    * @cfg {String} [triggerCls='x-form-date-trigger']
    * An additional CSS class used to style the trigger button. The trigger will always get the class 'x-form-trigger'
    * and triggerCls will be **appended** if specified (default class displays a calendar icon).
    */
    triggerCls: Ext.baseCSSPrefix + 'form-date-trigger',
    /**
    * @cfg {Boolean} showToday
    * false to hide the footer area of the Date picker containing the Today button and disable the keyboard handler for
    * spacebar that selects the current date.
    */
    showToday: true,
    /**
    * @cfg {Date/String} minValue
    * The minimum allowed date. Can be either a Javascript date object or a string date in a valid format.
    */
    /**
    * @cfg {Date/String} maxValue
    * The maximum allowed date. Can be either a Javascript date object or a string date in a valid format.
    */
    /**
    * @cfg {Number[]} disabledDays
    * An array of days to disable, 0 based. Some examples:
    *
    *     // disable Sunday and Saturday:
    *     disabledDays:  [0, 6]
    *     // disable weekdays:
    *     disabledDays: [1,2,3,4,5]
    */
    /**
    * @cfg {String[]} disabledDates
    * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular expression so
    * they are very powerful. Some examples:
    *
    *     // disable these exact dates:
    *     disabledDates: ["03/08/2003", "09/16/2003"]
    *     // disable these days for every year:
    *     disabledDates: ["03/08", "09/16"]
    *     // only match the beginning (useful if you are using short years):
    *     disabledDates: ["^03/08"]
    *     // disable every day in March 2006:
    *     disabledDates: ["03/../2006"]
    *     // disable every day in every March:
    *     disabledDates: ["^03"]
    *
    * Note that the format of the dates included in the array should exactly match the {@link #format} config. In order
    * to support regular expressions, if you are using a {@link #format date format} that has "." in it, you will have
    * to escape the dot when restricting dates. For example: `["03\\.08\\.03"]`.
    */

    /**
    * @cfg {String} submitFormat
    * The date format string which will be submitted to the server. The format must be valid according to
    * {@link Ext.Date#parse}.
    *
    * Defaults to {@link #format}.
    */

    /**
    * @cfg {Boolean} useStrict
    * True to enforce strict date parsing to prevent the default Javascript "date rollover".
    * Defaults to the useStrict parameter set on Ext.Date
    * See {@link Ext.Date#parse}.
    */
    useStrict: undefined,

    // in the absence of a time value, a default value of 12 noon will be used
    // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
    initTime: '12', // 24 hour format

    initTimeFormat: 'H',

    matchFieldWidth: false,
    //<locale>
    /**
    * @cfg {Number} [startDay=undefined]
    * Day index at which the week should begin, 0-based.
    *
    * Defaults to `0` (Sunday).
    */
    startDay: 0,
    //</locale>

    /**
    * @inheritdoc
    */
    valuePublishEvent: ['select', 'blur'],

    initComponent: function () {
        var me = this,
            isString = Ext.isString,
            min, max;

        min = me.minValue;
        max = me.maxValue;
        if (isString(min)) {
            me.minValue = me.parseDate(min);
        }
        if (isString(max)) {
            me.maxValue = me.parseDate(max);
        }
        me.disabledDatesRE = null;
        me.initDisabledDays();

        me.callParent();
    },

    initValue: function () {
        var me = this,
            value = me.value;

        // If a String value was supplied, try to convert it to a proper Date
        if (Ext.isString(value)) {
            me.value = me.rawToValue(value);
        }

        me.callParent();
    },

    // private
    initDisabledDays: function () {
        if (this.disabledDates) {
            var dd = this.disabledDates,
                len = dd.length - 1,
                re = "(?:",
                d,
                dLen = dd.length,
                date;

            for (d = 0; d < dLen; d++) {
                date = dd[d];

                re += Ext.isDate(date) ? '^' + Ext.String.escapeRegex(date.dateFormat(this.format)) + '$' : date;
                if (d !== len) {
                    re += '|';
                }
            }

            this.disabledDatesRE = new RegExp(re + ')');
        }
    },

    /**
    * Replaces any existing disabled dates with new values and refreshes the Date picker.
    * @param {String[]} disabledDates An array of date strings (see the {@link #disabledDates} config for details on
    * supported values) used to disable a pattern of dates.
    */
    setDisabledDates: function (disabledDates) {
        var me = this,
            picker = me.picker;

        me.disabledDates = disabledDates;
        me.initDisabledDays();
        if (picker) {
            picker.setDisabledDates(me.disabledDatesRE);
        }
    },

    /**
    * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the Date picker.
    * @param {Number[]} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config for details on
    * supported values.
    */
    setDisabledDays: function (disabledDays) {
        var picker = this.picker;

        this.disabledDays = disabledDays;
        if (picker) {
            picker.setDisabledDays(disabledDays);
        }
    },

    /**
    * Replaces any existing {@link #minValue} with the new value and refreshes the Date picker.
    * @param {Date} value The minimum date that can be selected
    */
    setMinValue: function (value) {
        var me = this,
            picker = me.picker,
            minValue = (Ext.isString(value) ? me.parseDate(value) : value);

        me.minValue = minValue;
        if (picker) {
            picker.minText = Ext.String.format(me.minText, me.formatDate(me.minValue));
            picker.setMinDate(minValue);
        }
    },

    /**
    * Replaces any existing {@link #maxValue} with the new value and refreshes the Date picker.
    * @param {Date} value The maximum date that can be selected
    */
    setMaxValue: function (value) {
        var me = this,
            picker = me.picker,
            maxValue = (Ext.isString(value) ? me.parseDate(value) : value);

        me.maxValue = maxValue;
        if (picker) {
            picker.maxText = Ext.String.format(me.maxText, me.formatDate(me.maxValue));
            picker.setMaxDate(maxValue);
        }
    },

    /**
    * Runs all of Date's validations and returns an array of any errors. Note that this first runs Text's validations,
    * so the returned array is an amalgamation of all field errors. The additional validation checks are testing that
    * the date format is valid, that the chosen date is within the min and max date constraints set, that the date
    * chosen is not in the disabledDates regex and that the day chosed is not one of the disabledDays.
    * @param {Object} [value] The value to get errors for (defaults to the current field value)
    * @return {String[]} All validation errors for this field
    */
    getErrors: function (value) {
        value = arguments.length > 0 ? value : this.formatDate(this.processRawValue(this.getRawValue()));

        var me = this,
            format = Ext.String.format,
            clearTime = Ext.Date.clearTime,
            errors = me.callParent([value]),
            disabledDays = me.disabledDays,
            disabledDatesRE = me.disabledDatesRE,
            minValue = me.minValue,
            maxValue = me.maxValue,
            len = disabledDays ? disabledDays.length : 0,
            i = 0,
            svalue,
            fvalue,
            day,
            time;



        if (value === null || value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
            return errors;
        }

        svalue = value;
        value = me.parseDate(value);
        if (!value) {
            errors.push(format(me.invalidText, svalue, Ext.Date.unescapeFormat(me.format)));
            return errors;
        }

        time = value.getTime();
        if (minValue && time < clearTime(minValue).getTime()) {
            errors.push(format(me.minText, me.formatDate(minValue)));
        }

        if (maxValue && time > clearTime(maxValue).getTime()) {
            errors.push(format(me.maxText, me.formatDate(maxValue)));
        }

        if (disabledDays) {
            day = value.getDay();

            for (; i < len; i++) {
                if (day === disabledDays[i]) {
                    errors.push(me.disabledDaysText);
                    break;
                }
            }
        }

        fvalue = me.formatDate(value);
        if (disabledDatesRE && disabledDatesRE.test(fvalue)) {
            errors.push(format(me.disabledDatesText, fvalue));
        }

        return errors;
    },

    rawToValue: function (rawValue) {
        return this.parseDate(rawValue) || rawValue || null;
    },

    valueToRaw: function (value) {
        return this.formatDate(this.parseDate(value));
    },

    /**
    * @method setValue
    * Sets the value of the date field. You can pass a date object or any string that can be parsed into a valid date,
    * using {@link #format} as the date format, according to the same rules as {@link Ext.Date#parse} (the default
    * format used is "m/d/Y").
    *
    * Usage:
    *
    *     //All of these calls set the same date value (May 4, 2006)
    *
    *     //Pass a date object:
    *     var dt = new Date('5/4/2006');
    *     dateField.setValue(dt);
    *
    *     //Pass a date string (default format):
    *     dateField.setValue('05/04/2006');
    *
    *     //Pass a date string (custom format):
    *     dateField.format = 'Y-m-d';
    *     dateField.setValue('2006-05-04');
    *
    * @param {String/Date} date The date or valid date string
    * @return {Ext.form.field.Date} this
    */

    /**
    * Attempts to parse a given string value using a given {@link Ext.Date#parse date format}.
    * @param {String} value The value to attempt to parse
    * @param {String} format A valid date format (see {@link Ext.Date#parse})
    * @return {Date} The parsed Date object, or null if the value could not be successfully parsed.
    */
    safeParse: function (value, format) {
        var me = this,
            utilDate = Ext.Date,
            result = null,
            strict = me.useStrict,
            parsedDate;

        if (utilDate.formatContainsHourInfo(format)) {
            // if parse format contains hour information, no DST adjustment is necessary
            result = utilDate.parse(value, format, strict);
        } else {
            // set time to 12 noon, then clear the time
            parsedDate = utilDate.parse(value + ' ' + me.initTime, format + ' ' + me.initTimeFormat, strict);
            if (parsedDate) {
                result = utilDate.clearTime(parsedDate);
            }
        }
        return result;
    },

    // @private
    getSubmitValue: function () {
        var format = this.submitFormat || this.format,
            value = this.getValue();

        return value ? Ext.Date.format(value, format) : '';
    },

    /**
    * @private
    */
    parseDate: function (value) {
        if (!value || Ext.isDate(value)) {
            return value;
        }

        var me = this,
            val = me.safeParse(value, me.format),
            altFormats = me.altFormats,
            altFormatsArray = me.altFormatsArray,
            i = 0,
            len;

        if (!val && altFormats) {
            altFormatsArray = altFormatsArray || altFormats.split('|');
            len = altFormatsArray.length;
            for (; i < len && !val; ++i) {
                val = me.safeParse(value, altFormatsArray[i]);
            }
        }
        return val;
    },

    // private
    formatDate: function (date) {
        return Ext.isDate(date) ? Ext.Date.dateFormat(date, this.format) : date;
    },

    createPicker: function () {
        var me = this,
            format = Ext.String.format;

        // Create floating Picker BoundList. It will acquire a floatParent by looking up
        // its ancestor hierarchy (Pickers use their pickerField property as an upward link)
        // for a floating component.
        return new Ext.ux.DateTimePicker({
            pickerField: me,
            floating: true,
            focusable: false, // Key events are listened from the input field which is never blurred
            hidden: true,
            minDate: me.minValue,
            maxDate: me.maxValue,
            disabledDatesRE: me.disabledDatesRE,
            disabledDatesText: me.disabledDatesText,
            disabledDays: me.disabledDays,
            disabledDaysText: me.disabledDaysText,
            format: me.format,
            showToday: me.showToday,
            startDay: me.startDay,
            minText: format(me.minText, me.formatDate(me.minValue)),
            maxText: format(me.maxText, me.formatDate(me.maxValue)),
            listeners: {
                scope: me,
                select: me.onSelect,
                clear: me.onClear
            },
            keyNavConfig: {
                esc: function () {
                    me.collapse();
                }
            }
        });
    },

    onSelect: function (m, d, e, r, t) {
        var me = this;

        me.setValue(d);
        me.fireEvent('select', me, d);
        me.collapse();
    },

    onClear: function (m, d) {
        var me = this;
        me.setValue('');
    },
    /**
    * @private
    * Sets the Date picker's value to match the current field value when expanding.
    */
    onExpand: function () {
        var me = this,
            value = me.getValue() instanceof Date ? me.getValue() : new Date();
        me.picker.setValue(value);
        me.picker.hour.setValue(value.getHours());
        me.picker.minute.setValue(value.getMinutes());
        me.picker.second.setValue(value.getSeconds());
    },

    // private
    onBlur: function (e) {
        var me = this,
            v = me.rawToValue(me.getRawValue());

        if (Ext.isDate(v)) {
            me.setValue(v);
        }
        me.callParent([e]);
    }

    /**
    * @cfg {Boolean} grow
    * @private
    */
    /**
    * @cfg {Number} growMin
    * @private
    */
    /**
    * @cfg {Number} growMax
    * @private
    */
    /**
    * @method autoSize
    * @private
    */
});