EXTJS7 自定义日期时间选择输入框

效果

组件定义

Ext.define('PSR.field.Datetime', {
    extend: 'Ext.field.Container',
    xtype: 'psr-datetimefield',
    items: [{
        xtype: 'datefield', placeholder: '日期',
        dateFormat: 'Y-m-d',
        flex: 1
    }, {
        xtype: 'timefield', placeholder: '时间',
        format: 'H:i:s',
        flex: 1
    }],
    getValue: function () {
        var date = this.getAt(0).getRawValue();
        var time = this.getAt(1).getRawValue();
        return date && time ? (date + ' ' + time) : null;
    },
    setValue: function (value) {
        var datetime = value ? Ext.Date.parse(value, "Y-m-d H:i:s") : null;
        this.getAt(0).setValue(datetime);
        this.getAt(1).setValue(datetime);
    }
});

使用

...
{
	xtype: 'formpanel',
	items:[{
		xtype: 'psr-datetimefield',
		name: 'datetimeprop',
		label: '日期时间'
	}]
}
...
form.setValues({datetimeprop: '2020-04-10 14:27:00'});
var values = form.getValues();  // values: {datetimeprop: '2020-04-10 14:27:00'}