JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/css/ext-all.css">
    <div id="time-field"></div>
<br/>
<div id="time-btn"></div>

JavaScript

new Ext.form.TimeField({
    id: 'timeField',
    renderTo: 'time-field',
    fieldLabel: 'Time',
    name: 'time',
    format: 'H:i',
    altFormats:'H:i',
    increment: 30
});

new Ext.Button({
    text: 'What a date?',
    renderTo: 'time-btn',
    handler: function() {
        var field = Ext.getCmp('timeField');
        var value = field.getValue();
        console.log(value); // @TODO: remove this
        console.log(field.getSubmitValue()); // @TODO: remove this
        
        var formattedValue = Ext.Date.format(value, 'H:i');
        console.log(formattedValue); // @TODO: remove this
    }
});