JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://docs.sencha.com/extjs/4.1.3/resources/css/app-b35792cfe6686887f720936b33191682.css">

JavaScript

Ext.define('Ext.ux.form.field.DateTime', {
    extend:'Ext.form.FieldContainer',
    mixins: {
        field: 'Ext.form.field.Field'
    },
    alias: 'widget.datetimefield',
    layout: 'hbox',
    width: 400,
    height: 22,
    combineErrors: true,
    msgTarget :'side',

    dateCfg:{},
    timeCfg:{},

    initComponent: function() {
        var me = this;
        me.buildField();
        me.callParent();
        this.dateField = this.down('datefield')
        this.timeField = this.down('timefield')
        me.initField();
    },

    //@private
    buildField: function(){
        this.items = [
            Ext.apply({
                xtype: 'datefield',
                format: 'Y-m-d',
                width: 100
            },this.dateCfg),
            Ext.apply({
                xtype: 'timefield',
                format: 'H:i',
                width: 80
            },this.timeCfg)
        ]
    },

    getValue: function() {
        return "test"
    },

    setValue: function(value){
      
    },

    getSubmitData: function(){
        var value = this.getValue()
        var format = this.getFormat()
        return value ? Ext.Date.format(value, format) : null;
    },

    getFormat: function(){
        return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format)
    }
})



var form = Ext.create('Ext.form.Panel', {
    title: 'Base Example',
    url : "/test",
    
    layout: 'hbox',
    items: [{
        xtype: 'datetimefield',
        fieldLabel: 'Search',
        name: 'search_field',
        enableKeyEvents: true,
            }, {
                xtype: 'button', text : 'submit',handler : function(){form.submit();}
    }],
    
    renderTo: Ext.getBody()
});