Extjs 5.x 日期时间控件DateTime源码

/** * Created by jiawenjun on 2016/8/5. */Ext.define(‘Ux.picker.DateTime‘, {    extend: ‘Ext.Component‘,    requires: [        ‘Ext.XTemplate‘,        ‘Ext.button.Button‘,        ‘Ext.button.Split‘,        ‘Ext.util.ClickRepeater‘,        ‘Ext.util.KeyNav‘,        ‘Ext.fx.Manager‘,        ‘Ext.picker.Month‘    ],    alias: ‘widget.datetimepicker‘,    okText:‘确定‘,    okTip:‘确定‘,    isDatePicker: true,    focusable: false,    childEls: [        ‘innerEl‘, ‘eventEl‘, ‘prevEl‘, ‘nextEl‘, ‘middleBtnEl‘, ‘footerEl‘,‘timeEl‘    ],    border: true,    hideOnSelect:false,    renderTpl: [        ‘<div id="{id}-innerEl" data-ref="innerEl">‘,        ‘<div class="{baseCls}-header">‘,        ‘<div id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-prev {baseCls}-arrow" role="button" 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="button" title="{nextText}"></div>‘,        ‘</div>‘,        ‘<table role="grid" id="{id}-eventEl" data-ref="eventEl" class="{baseCls}-inner" {%‘,        // If the DatePicker is focusable, make its eventEl tabbable.        // Note that we‘re looking at the `focusable` property because        // calling `isFocusable()` will always return false at that point        // as the picker is not yet rendered.        ‘if (values.$comp.focusable) {out.push("tabindex=\\\"0\\\"");}‘,        ‘%} cellspacing="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>‘,        ‘<table role="gridTime" id="{id}-timeEl" data-ref="timeEl" style="table-layout:auto;width:auto;margin:0 3px;" class="{baseCls}-inner" cellspacing="0">‘,        ‘<tbody><tr>‘,        ‘<td>{%this.renderHourBtn(values,out)%}</td>‘,        ‘<td>{%this.renderMinuteBtn(values,out)%}</td>‘,        ‘<td>{%this.renderSecondBtn(values,out)%}</td>‘,        ‘</tr></tbody>‘,        ‘</table>‘,        ‘<tpl if="showToday">‘,        ‘<div id="{id}-footerEl" data-ref="footerEl" role="presentation" class="{baseCls}-footer">{%this.renderOkBtn(values, out)%}{%this.renderTodayBtn(values, out)%}</div>‘,        ‘</tpl>‘,        ‘</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">‘ : ‘‘;            },            renderTodayBtn: function(values, out) {                Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);            },            renderMonthBtn: function(values, out) {                Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);            },            renderHourBtn: function (values, out) {                Ext.DomHelper.generateMarkup(values.$comp.hourBtn.getRenderTree(), out);            },            renderMinuteBtn: function (values, out) {                Ext.DomHelper.generateMarkup(values.$comp.minuteBtn.getRenderTree(), out);            },            renderSecondBtn: function (values, out) {                Ext.DomHelper.generateMarkup(values.$comp.secondBtn.getRenderTree(), out);            },            renderOkBtn: function (values, out) {                Ext.DomHelper.generateMarkup(values.$comp.okBtn.getRenderTree(), out);            }        }    ],    todayText: ‘现在‘,    ariaTitle: ‘Date Picker: {0}‘,    ariaTitleDateFormat: ‘F d‘,    todayTip: ‘‘,    minText: ‘This date is before the minimum date‘,    maxText: ‘This date is after the maximum date‘,    disabledDaysText: ‘Disabled‘,    disabledDatesText: ‘Disabled‘,    nextText: ‘下个月 (Control+Right)‘,    prevText: ‘上个月 (Control+Left)‘,    monthYearText: ‘选择一个月 (Control+Up/Down 来改变年份)‘,    monthYearFormat: ‘F Y‘,    startDay: 0,    showToday: true,    disableAnim: false,    baseCls: Ext.baseCSSPrefix + ‘datepicker‘,    longDayFormat: ‘F d, Y‘,    initHour: 12, // 24-hour format

numDays: 42,    initComponent: function() {        var me = this,            clearTime = function(v){return v};        //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();    },    okHandler: function () {        var me = this,            btn = me.okBtn;

if (btn && !btn.disabled) {            var d=me.value;            d.setHours(me.hourBtn.getValue());            d.setMinutes(me.minuteBtn.getValue());            d.setSeconds(me.secondBtn.getValue());            me.setValue(d);            me.fireEvent(‘select‘, me, me.value);            me.onSelect();        }        return me;    },    // 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);        }        results.push(me.hourBtn);        results.push(me.minuteBtn);        results.push(me.secondBtn);        return results;    },

beforeRender: function() {        var me = this,            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,            listeners: {                click: me.doShowMonthPicker,                arrowclick: me.doShowMonthPicker,                scope: me            }        });

if (me.showToday) {            me.todayBtn = new Ext.button.Button({                ownerCt: me,                ownerLayout: me.getComponentLayout(),                text: Ext.String.format(me.todayText, today),                tooltip: Ext.String.format(me.todayTip, today),                tooltipType: ‘title‘,                cls:‘my-action-close‘,                handler: me.selectToday,                scope: me            });        }        me.hourBtn = new Ext.form.field.Number({            minValue: 0,hideTrigger:false,            maxValue: 23,            step: 1,            width: 55        });        me.minuteBtn = new Ext.form.field.Number({            minValue: 0,hideTrigger:false,            maxValue: 59,            step: 1,            width: 70,            labelWidth: 10,            fieldLabel: ‘&nbsp;‘        });        me.secondBtn = new Ext.form.field.Number({            minValue: 0,hideTrigger:false,            maxValue: 59,            step: 1,            width: 70,            labelWidth: 10,            fieldLabel: ‘&nbsp;‘        });        me.okBtn = new Ext.button.Button({            ownerCt: me,            cls:‘my-action-close‘,            //ownerLayout: me.getComponentLayout(),            text: me.okText,            tooltip: me.okTip,            tooltipType: ‘title‘,            handler: me.okHandler,            scope: me        });

me.callParent();

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

Ext.apply(me.renderData, {            dayNames: me.dayNames,            showToday: me.showToday,            prevText: me.prevText,            nextText: me.nextText,            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();    },    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‘            }        });    },    initEvents: function(){        var me = this,            pickerField = me.pickerField,            eDate = Ext.Date,            day = eDate.DAY;

me.callParent();        if (!me.focusable) {            me.el.on({                mousedown: me.onMouseDown            });        }        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        });

// Read key events through our pickerField if we are bound to one        me.keyNav = new Ext.util.KeyNav(pickerField ? pickerField.inputEl : me.eventEl, Ext.apply({            scope: me,

// Must capture event so that the Picker sees it before the Field.            capture: true,

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) {                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;

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;    },    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 + ‘)‘);        }    },    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;    },    setDisabledDays: function(dd){        this.disabledDays = dd;        return this.update(this.value, true);    },    setMinDate: function(dt){        this.minDate = dt;        return this.update(this.value, true);    },    setMaxDate: function(dt){        this.maxDate = dt;        return this.update(this.value, true);    },    _valueSplit: function(v) {        if(Ext.isDate(v)) {            v = Ext.Date.format(v, ‘H:i:s‘);        }        var split = v.split(‘:‘);        return {            h: split.length > 0 ? split[0] : 0,            m: split.length > 1 ? split[1] : 0,            s: split.length > 2 ? split[2] : 0        };    },    setRawValue: function(value) {        var v = this._valueSplit(value);        this.hourBtn.setValue(v.h);        this.minuteBtn.setValue(v.m);        this.secondBtn.setValue(v.s);    },    setValue: function(value){        // If passed a null value just pass in a new date object.        this.value = value || new Date();        this.setRawValue(value);        return this.update(this.value);    },    getValue: function(){        return this.value;    },    getDayInitial: function(value){        return value.substr(0,1);    },    onEnable: function(){        this.callParent();        this.syncDisabled(false);        this.update(this.activeDate);

},    onShow: function(){        this.callParent();        this.syncDisabled(false);        if (this.pickerField) {            this.startValue = this.pickerField.getValue();        }    },    onHide: function(){        this.callParent();        this.syncDisabled(true);    },    onDisable: function(){        this.callParent();        this.syncDisabled(true);    },    getActive: function(){        return this.activeDate || this.value;    },    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);        }    },    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();    },    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;    },    shouldAnimate: function(animate) {        return Ext.isDefined(animate) ? animate : !this.disableAnim;    },    createMonthPicker: function() {        var me = this,            picker = me.monthPicker;

if (!picker) {            me.monthPicker = picker = new Ext.picker.Month({                renderTo: me.el,                ownerCmp: me,                floating: true,                padding: me.padding,                shadow: false,                small: me.showToday === false,                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;    },    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));        }        date.setHours(me.hourBtn.getValue());        date.setMinutes(me.minuteBtn.getValue());        date.setSeconds(me.secondBtn.getValue());        me.setValue(date);        me.hideMonthPicker();    },    onCancelClick: function() {        this.selectedUpdate(this.activeDate);        this.hideMonthPicker();    },    showPrevMonth: function(e) {        return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.MONTH, -1));    },    showNextMonth: function(e) {        return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.MONTH, 1));    },    showPrevYear: function() {        return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.YEAR, -1));    },    showNextYear: function() {        return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.YEAR, 1));    },    handleMouseWheel: function(e) {        e.stopEvent();        if(!this.disabled){            var delta = e.getWheelDelta();            if(delta > 0){                this.showPrevMonth();            } else if(delta < 0){                this.showNextMonth();            }        }    },    handleDateClick: function(e, t) {        var me = this,            handler = me.handler;

e.stopEvent();        if(!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)){            var d=new Date(t.dateValue);            d.setHours(me.hourBtn.getValue());            d.setMinutes(me.minuteBtn.getValue());            d.setSeconds(me.secondBtn.getValue());            me.setValue(d);            me.fireEvent(‘select‘, me, me.value);            if (handler) {                handler.call(me.scope || me, me, me.value);            }            me.onSelect();        }    },    onSelect: function() {        if (this.hideOnSelect) {            this.hide();        }    },    selectToday: function() {        var me = this,            btn = me.todayBtn,            handler = me.handler;

if (btn && !btn.disabled) {            me.setValue(new Date());            me.fireEvent(‘select‘, me, me.value);            if (handler) {                handler.call(me.scope || me, me, me.value);            }            me.onSelect();        }        return me;    },    selectedUpdate: function(date) {        var me        = this,            //t         = date.getTime(),            tt=Ext.Date.clearTime(date,true),            t         = tt.getTime(),            cells     = me.cells,            cls       = me.selectedCls,            c,            cLen      = cells.getCount(),            cell;

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;            }        }    },    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];

value = +eDate.clearTime(current, true);            cell.setAttribute(‘aria-label‘, eDate.format(current, ariaTitleDateFormat));            // store dateValue number as an expando            cell.firstChild.dateValue = value;            if (value == today) {                cls += ‘ ‘ + me.todayCls;                cell.firstChild.title = me.todayText;

// Extra element for ARIA purposes                me.todayElSpan = Ext.DomHelper.append(cell.firstChild, {                    tag: ‘span‘,                    cls: Ext.baseCSSPrefix + ‘hidden-clip‘,                    html: me.todayText                }, true);            }            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;                cell.setAttribute(‘aria-label‘, me.minText);            }            else if (value > max) {                cls += ‘ ‘ + disabledCls;                cell.setAttribute(‘aria-label‘, me.maxText);            }            else if (ddays && ddays.indexOf(current.getDay()) !== -1){                cell.setAttribute(‘aria-label‘, ddaysText);                cls += ‘ ‘ + disabledCls;            }            else if (ddMatch && format){                formatValue = eDate.dateFormat(current, format);                if(ddMatch.test(formatValue)){                    cell.setAttribute(‘aria-label‘, ddText.replace(‘%0‘, formatValue));                    cls += ‘ ‘ + disabledCls;                }            }            cell.className = cls + ‘ ‘ + me.cellCls;        };

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.monthBtn.setText(Ext.Date.format(date, me.monthYearFormat));    },    update: function(date, forceRefresh) {        var me = this,            active = me.activeDate;

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;    },    beforeDestroy: function() {        var me = this;        if (me.rendered) {            Ext.destroy(                me.keyNav,                me.monthPicker,                me.monthBtn,                me.nextRepeater,                me.prevRepeater,                me.todayBtn,                me.todayElSpan,                me.hourBtn,                me.minuteBtn,                me.secondBtn            );            delete me.textNodes;            delete me.cells.elements;        }        me.callParent();    },

privates: {        // TODO: Refactor as a Container.        finishRenderChildren: function () {            var me = this;

me.callParent();            me.monthBtn.finishRender();            if (me.showToday) {                me.todayBtn.finishRender();            }            me.hourBtn.finishRender();            me.minuteBtn.finishRender();            me.secondBtn.finishRender();            me.okBtn.finishRender();        },        getFocusEl: function() {            return this.eventEl;        },        syncDisabled: function (disabled) {            var me = this,                keyNav = me.keyNav;            if (keyNav) {                keyNav.setDisabled(disabled);                me.prevRepeater.setDisabled(disabled);                me.nextRepeater.setDisabled(disabled);                if (me.todayBtn) {                    me.todayBtn.setDisabled(disabled);                }            }        }    },    constrain:true});

Ext.define(‘Ux.form.field.DateTime‘, {    extend:‘Ext.form.field.Picker‘,    alias: ‘widget.datetimefield‘,    format: "Y-m-d H:i:s",    //format : "m/d/Y",    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",    disabledDaysText : "",    disabledDatesText : "",    minText : "日期必须大于最小允许日期{0}",    maxText : "日期必须小于最大允许日期{0}",    invalidText : "{0} 无效的日期格式 - 必须符合此格式 {1}",    triggerCls : Ext.baseCSSPrefix + ‘form-date-trigger‘,    showToday : true,    useStrict: undefined,    initTime: ‘12‘, // 24 hour format

initTimeFormat: ‘H‘,

matchFieldWidth: false,    startDay: 0,    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 (Ext.isString(value)) {            me.value = me.rawToValue(value);        }

me.callParent();    },    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 + ‘)‘);        }    },    setDisabledDates : function(disabledDates){        var me = this,            picker = me.picker;

me.disabledDates = disabledDates;        me.initDisabledDays();        if (picker) {            picker.setDisabledDates(me.disabledDatesRE);        }    },    setDisabledDays : function(disabledDays){        var picker = this.picker;

this.disabledDays = disabledDays;        if (picker) {            picker.setDisabledDays(disabledDays);        }    },    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);        }    },    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);        }    },    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.formatDateValid(minValue)));        }

if (maxValue && time > clearTime(maxValue).getTime()) {            errors.push(format(me.maxText, me.formatDateValid(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));    },    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;    },    getSubmitValue: function() {        var format = this.submitFormat || this.format,            value = this.getValue();

return value ? Ext.Date.format(value, format) : ‘‘;    },    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;    },    formatDate: function(date){        return Ext.isDate(date) ? Ext.Date.dateFormat(date, this.format) : date;    },    formatDateValid:function(date){        return Ext.isDate(date) ? Ext.Date.dateFormat(date, "Y-m-d") : date;    },    createPicker: function() {        var me = this,            format = Ext.String.format;        return new Ux.picker.DateTime({            pickerField: me,            //ownerCt: me.ownerCt,            floating: true,            focusable: false,            //focusOnShow: true,            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            },            keyNavConfig: {                esc: function () {                    me.collapse();                }            }        });    },    onSelect: function(m, d) {        var me = this;        me.setValue(d);        me.fireEvent(‘select‘, me, d);        me.collapse();    },    onExpand: function() {        var value = this.getValue();        this.picker.setValue(Ext.isDate(value) ? value : new Date());    },

// private    onBlur: function(e) {        var me = this,            v = me.rawToValue(me.getRawValue());        if (Ext.isDate(v)) {            me.setValue(v);        }        me.callParent([e]);    },    collapseIf: function(e) {        var me = this;        me.isDestroyed=true;        var btns=me.picker.el.query(‘.my-action-close‘,false);        var okBtnEl=btns[0];        var nowEl=btns[1];        if(e.within(okBtnEl,false,true)||e.within(nowEl,false,true)||!me.owns(e.target) || e.within(me.bodyEl, false, true)){            me.isDestroyed=false;        }        if(e.within(me.picker.timeEl,false,true)){            me.isDestroyed=true;        }        if (!me.isDestroyed  && !me.owns(e.target)  && !e.within(me.bodyEl, false, true)) {            me.collapse(e);        }    }});