Extjs5 日期控件扩展，选择时分秒

1.定义DatetimeField

Ext.define('Platform.utils.DatetimeField', {
    extend: 'Ext.form.field.Date',
    alias: 'widget.datetimefield',
    requires: ['Platform.utils.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 H:i:s",
    //</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.
     */
    format: "m-d-Y H:i:s",
    width: 270,


    mimicBlur: function(e) {
        var me = this,
            picker = me.picker;


        // ignore mousedown events within the picker element
        if (!picker || !e.within(picker.el, false, true) && !e.within(picker.timePicker.el, false, true)) {
            me.callParent(arguments);
        }
    },
    triggerBlur: function() {
        return false;
    },
    collapseIf: function(e) {
        var me = this,
            picker = me.picker;


        if ((Ext.getVersion().major == 4 && !me.isDestroyed &&
          !e.within(me.bodyEl, false, true) && !e.within(me.picker.el, false, true) &&
          !e.within(me.picker.timePicker.el, false, true)) ||
          (Ext.getVersion().major == 5 &&
          !Ext.fly(e.target).isFocusable() &&
          !me.isDestroyed &&
          !e.within(me.bodyEl, false, true) && !me.owns(e.target))
          && !e.within(picker.timePicker.el, false, true)) {
            me.collapse();
        }
    },


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


        var picker =  new Platform.utils.DatetimePicker({
            pickerField: me,
            floating: true,
            hidden: true,
            focusable: false, // Key events are listened from the input field which is never blurred
            focusOnShow: true,
            hideOnSelect: false,
            minDate: me.minValue,
            maxDate: me.maxValue,
            disabledDatesRE: me.disabledDatesRE,
            disabledDatesText: me.disabledDatesText,
            disabledDays: me.disabledDays,
            disabledDaysText: me.disabledDaysText,
            format: me.format,
            showToday: false,
            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();
                }
            }
        });
        return picker;
    },
    onSelect: function(m, d) {
        var me = this;


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

2.定义DatetimePicker

Ext.define('Platform.utils.DatetimePicker', {
    extend: 'Ext.picker.Date',
    alias: 'widget.datetimepicker',
    requires: [
        'Ext.picker.Date',
        'Ext.slider.Single',
        'Ext.form.field.Time',
        'Ext.form.Label'
    ],
    todayText: 'Current Date',


    initComponent: function() {
        var me = this,
            dtAux = me.value ? new Date(me.value) : new Date();


        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';
        //dtAux.setSeconds(0);


        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 = new Date(dtAux);


        Ext.apply(me, {
            timeFormat: ~me.format.indexOf("h") ? 'h' : 'H'


        });


        me.initDisabledDays();
        me.hourSlider = new Ext.form.field.Number({
            value: 0,
            minValue: 0,
            maxValue: 23,
            width:58,
            padding:'5 0',
            listeners: {
                change: me.changeTimeValue,
                scope: me
            }
        });


        me.minuteSlider = new Ext.form.field.Number({
            value: 0,
            padding:'5 0',
            minValue: 0,
            maxValue: 59,
            width:58,
            listeners: {
                change: me.changeTimeValue,
                scope: me
            }
        });
        me.secondSlider = new Ext.form.field.Number({
            value: 0,
            padding:'5 0',
            minValue: 0,
            maxValue: 59,
            width:58,
            listeners: {
                change: me.changeTimeValue,
                scope: me
            }
        });


        me.submitBtn = new Ext.button.Button ({
            text: '确定',
            handler: me.submitHandler,
            scope: me
        });
    },
    afterRender: function() {
        var me = this,
            el = me.el;
        this.callParent();
        me.timePicker = Ext.create('Ext.menu.Menu', {
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            ownerCmp: me,
            //alwaysOnTop:true,
            border: false,
            defaults: {
                flex: 1
            },
            height: 70,
            floating: true,
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'bottom',
                ui: 'footer',
                items: [
                    '->', me.submitBtn,
                    '->'
                ]
            }],
            items: [
                {
                    xtype:'container',
                    layout: {
                        type: 'hbox',
                        align: 'middle ',
                        pack: 'center'
                    },
                    width: '100%',
                    items:[ me.hourSlider,{html:':',padding:'5 5 5 0'}, me.minuteSlider,{html:':',padding:'5 5 5 0'},me.secondSlider]
                }
            ]


        });
        //me.on('move',me.showTimePicker);
    },
    submitHandler: function () {
        var me = this;
        me.ownerCmp.collapse();
    },


    changeTimeValue: function(slider, e, eOpts) {
        var me = this,
            //label = me.timePicker.down('label'),
            hourPrefix = '',
            minutePrefix = me.minuteSlider.getValue() < 10 ? '0' : '',
            timeSufix = '',
            hourDisplay = me.hourSlider.getValue(),
            auxDate = new Date();


        if (me.timeFormat == 'h') {
            timeSufix = me.hourSlider.getValue() < 12 ? ' AM' : ' PM';
            hourDisplay = me.hourSlider.getValue() < 13 ? hourDisplay : hourDisplay - 12;
            hourDisplay = hourDisplay || '12';
        }
        hourPrefix = hourDisplay < 10 ? '0' : '';


        //label.setText(hourPrefix + hourDisplay + ':' + minutePrefix + me.minuteSlider.getValue() + timeSufix);


        if (me.pickerField && me.pickerField.getValue()) {
            me.pickerField.setValue(new Date(me.pickerField.getValue().setHours(me.hourSlider.getValue(), me.minuteSlider.getValue(),me.secondSlider.getValue())));
        }else{
            me.pickerField.setValue(new Date((new Date).setHours(me.hourSlider.getValue(), me.minuteSlider.getValue(),me.secondSlider.getValue())));
        }
    },
    onShow: function() {
        var me = this;
        me.showTimePicker();
        me.callParent();
    },


    showTimePicker: function() {
        var me = this,
            el = me.el,
            timePicker = me.timePicker;
        Ext.defer(function() {
            var body = Ext.getBody(),
                bodyWidth = body.getViewSize().width,
                bodyHeight = body.getViewSize().height,
                alignTo = 'bl',
                yPos = 0,
                backgroundColor, toolbar;
            var top = el.getTop(),height = me.timePicker.height,
                bottom = bodyHeight-el.getBottom(),
                offsetY = el.getOffsetsTo(me.ownerCmp)[1];
            if(offsetY< 0) el.setTop(top - height);
            if(bottom < height && offsetY > 0) el.setTop(top-height-el.getHeight()-me.ownerCmp.getHeight());
                me.timePicker.setWidth(el.getWidth());
                me.timePicker.showBy(me, alignTo, [ 0, yPos]);


            toolbar = me.timePicker.down('toolbar').getEl();
            backgroundColor = toolbar.getStyle('background-color');
            if (backgroundColor == 'transparent') {
                toolbar.setStyle('background-color', toolbar.getStyle('border-color'));
            }
        }, 1);
    },


    beforeDestroy: function() {
        var me = this;


        if (me.rendered) {
            Ext.destroy(
                me.timePicker,
                me.minuteSlider,
                me.hourSlider
            );
        }
        me.callParent();
    },
    setValue: function(value) {
        //value.setSeconds(0);
        this.value = new Date(value);
        return this.update(this.value);
    },
    selectToday: function() {
        var me = this,
            btn = me.todayBtn,
            handler = me.handler
        auxDate = new Date;


        if (btn && !btn.disabled) {
            me.setValue(new Date(auxDate));
            //me.fireEvent('select', me, me.value);
            if (handler) {
                handler.call(me.scope || me, me, me.value);
            }
            me.onSelect();
        }
        return me;
    },
    handleDateClick: function(e, t) {
        var me = this,
            handler = me.handler,
            hourSet = me.hourSlider.getValue(),
            minuteSet = me.minuteSlider.getValue(),
            secondSet = me.secondSlider.getValue(),
            auxDate = new Date(t.dateValue);
        if (!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)) {
            me.doCancelFocus = me.focusOnSelect === false;
            auxDate.setHours(hourSet, minuteSet, secondSet);
            me.setValue(new Date(auxDate));
            delete me.doCancelFocus;
            me.fireEvent('select', me, me.value);
            if (handler) {
                handler.call(me.scope || me, me, me.value);
            }


            me.onSelect();
        }
    },
    selectedUpdate: function(date) {
        var me = this,
            dateOnly = Ext.Date.clearTime(date, true),
            currentDate = (me.pickerField && me.pickerField.getValue()) || new Date();


        this.callParent([dateOnly]);


        if (currentDate) {
            Ext.defer(function() {
                me.hourSlider.setValue(currentDate.getHours());
                me.minuteSlider.setValue(currentDate.getMinutes());
                me.secondSlider.setValue(currentDate.getSeconds());
            }, 10);


        }


    },
    fullUpdate: function(date) {
        var me = this,
            dateOnly = Ext.Date.clearTime(date, true),
            currentDate = (me.pickerField && me.pickerField.getValue()) || new Date();


        this.callParent([dateOnly]);


        if (currentDate) {
            Ext.defer(function() {
                me.hourSlider.setValue(currentDate.getHours());
                me.minuteSlider.setValue(currentDate.getMinutes());
                me.secondSlider.setValue(currentDate.getSeconds());
            }, 10);


        }


    }
});

3.调用

{
xtype : 'datetimefield',
            fieldLabel: '录入时间',
            flex: 1,
            format: 'Y-m-d H:i:s',
    submitFormat: 'Y-m-d H:i:s',
            bind : '{currentRecord.createDate}',
            name: 'createDate'
}