EXTJS 6 日期组件 日期时间组件（Y-m-d H:i:s）

我想要个这样的 带有时分秒的（xtype : 'datetimefield'）

 

 

但是现实是这样的。。。。（xtype : 'datefield'）

 

默认extjs6 是不支持datefield 的， 想要实现上述效果需要改造一下ext-all-debug.js

需要在ext-all-debug.js的最后追加一部分（新增部分）

引用方式：

                           {
                                    xtype : 'datetimefield',
                                    fieldLabel : '开始时间',
                                    id:'startTime',
                                    labelAlign : "right",
                                    value : new Date()
                                }

 

 

/**↓↓↓↓↓↓↓↓↓新增的部分↓↓↓↓↓↓↓↓↓↓*/

//日期组件datetimefield带时分秒的
Ext.define('Ext.ux.DateTimeField', {
    extend:'Ext.form.field.Date',
    alias: 'widget.datetimefield',
    requires: ['Ext.ux.DateTimePicker'],

    format : "Y/m/d H:i:s",

    altFormats : "Y/m/d H:i:s",

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

        return new Ext.ux.DateTimePicker({
            pickerField: me,
            floating: true,

            hidden: true,
            minDate: me.minValue,
            maxDate: me.maxValue,
            disabledDatesRE: me.disabledDatesRE,
            disabledDatesText: me.disabledDatesText,
            ariaDisabledDatesText: me.ariaDisabledDatesText,
            disabledDays: me.disabledDays,
            disabledDaysText: me.disabledDaysText,
            ariaDisabledDaysText: me.ariaDisabledDaysText,
            format: me.format,
            showToday: me.showToday,
            startDay: me.startDay,
            minText: format(me.minText, me.formatDate(me.minValue)),
            ariaMinText: format(me.ariaMinText, me.formatDate(me.minValue, me.ariaFormat)),
            maxText: format(me.maxText, me.formatDate(me.maxValue)),
            ariaMaxText: format(me.ariaMaxText, me.formatDate(me.maxValue, me.ariaFormat)),
            editable: true,
            listeners: {
                scope: me,
                select: me.onSelect
            },
            keyNavConfig: {
                esc: function() {
                    me.inputEl.focus();
                    me.collapse();
                }
            }
        });
    },
    onMouseDown: function(e) {
        //e.preventDefault();
        console.dir('ssssss');
    },
    onExpand: function() {
        var value = this.getValue();
        this.picker.setValue(Ext.isDate(value) ? value : new Date(), true);
    }
});

//日期组件datetimefield带时分秒的
Ext.define('Ext.ux.DateTimePicker', {
    extend: 'Ext.picker.Date',
    alias: 'widget.datetimepicker',
    okText: '确定',
    todayText: '今天',
    focusable: true,
    editable: true,

    renderTpl: [
        '<div id="{id}-innerEl" data-ref="outnerEl" 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>',

        '<center>',
        '<table id="{id}-timeEl" data-ref="timeEl" style="width: auto; margin: 4px 15px;" class="x-datepicker-inner sys-timepicker-inner" cellspacing="0">',
        '<tbody>',
        '<tr>',
        '<td>{%this.renderHourBtn(values,out)%}</td>',
        '<td style="width: 16px; text-align: center; font-weight: bold;">:</td>',
        '<td>{%this.renderMinuteBtn(values,out)%}</td>',
        '<td style="width: 16px; text-align: center; font-weight: bold;">:</td>',
        '<td>{%this.renderSecondBtn(values,out)%}</td>',
        '</tr>',
        '</tbody>',
        '</table>',
        '</center>',

        '<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>',
        // 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}-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">' : '';
            },

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

    beforeRender: function() {
        var me = this, _$Number = Ext.form.field.Number, today = Ext.Date.format(new Date(), me.format),
            ownerLayout = me.getComponentLayout()
            ;

        me.hourBtn = new _$Number({
            ownerCt: me,
            ownerLayout: ownerLayout,
            minValue: 0 ,
            maxValue: 23,
            step: 1,
            width: 75,
			enableKeyEvents: true,
            editable : true,
            listeners: {
                keyup: function(field, e){
                    if (field.getValue() > 59){
                        e.stopEvent();
                        field.setValue(59);
                    }
                }
            }
        });

        me.minuteBtn = new _$Number({
            ownerCt: me,
            ownerLayout: ownerLayout,
            minValue: 0,
            maxValue: 59,
            step: 1,
            width: 75
        });

        me.secondBtn = new _$Number({
            ownerCt: me,
            ownerLayout: ownerLayout,
            minValue: 0,
            maxValue: 59,
            step: 1,
            width: 75
        });

        me.okBtn = new Ext.button.Button({
            ui: me.footerButtonUI,
            ownerCt: me,
            ownerLayout: ownerLayout,
            text: me.okText,
            tooltipType: 'title',
            tabIndex: -1,
            ariaRole: 'presentation',
            handler: me.okHandler,
            scope: me
        });

        me.callParent();
    },

    privates : {
        finishRenderChildren: function() {
            var me = this;
            me.callParent();

            me.hourBtn.finishRender();
            me.minuteBtn.finishRender();
            me.secondBtn.finishRender();
            me.okBtn.finishRender();
        }
    },

    okHandler: function() {
        var me = this, btn = me.okBtn;

        if(btn && !btn.disabled) {
            me.setValue(this.getValue());
            me.fireEvent('select', me, me.value);
            me.onSelect();
        }

        return me;
    },

    selectedUpdate: function(date) {
        this.callParent([Ext.Date.clearTime(date, true)]);
    },

    update: function(date, forceRefresh) {
        var me = this;

        me.hourBtn.setValue(date.getHours());
        me.minuteBtn.setValue(date.getMinutes());
        me.secondBtn.setValue(date.getSeconds());

        return this.callParent(arguments);
    },

    setValue: function(date, isFixed) {
        var me = this;

        if(isFixed !== true) {
            date.setHours(me.hourBtn.getValue());
            date.setMinutes(me.minuteBtn.getValue());
            date.setSeconds(me.secondBtn.getValue());
        }

        me.value = date;
        me.update(me.value);

        return me;
    },

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

        if(me.rendered) {
            Ext.destroy(
                me.hourBtn,
                me.minuteBtn,
                me.secondBtn,
                me.okBtn
            );
        }

        me.callParent();
    },

    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.doCancelFocus = me.focusOnSelect === false;
            me.setValue(new Date(t.dateValue));
            delete me.doCancelFocus;

            // by pass on select to keep the window open
             me.fireEvent('select', me, me.value);
             if (handler) {
             handler.call(me.scope || me, me, me.value);
             }
             // event handling is turned off on hide
             // when we are using the picker in a field
             // therefore onSelect comes AFTER the select
             // event.
             me.onSelect();

        }
    }
});

/**↑↑↑↑↑↑↑↑↑↑↑↑↑新增的部分↑↑↑↑↑↑↑↑↑↑↑↑*/