Ext JS 6 modern toolkit Time picker field?

Question

Is there a time picker field like Datetimepicker field in Ext JS 6 modern toolkit? I copied the Sencha touch 2 Time picker field but it is not working in Ext JS 6 modern app. Any solutions?

Answer 1

So here is what i came up with

Create a file in ext/modern/modern/src/field/TimePicker.js

now paste the bellow code in the file

Ext.define('Ext.field.TimePicker', {
extend: 'Ext.field.Text',
alternateClassName: 'Ext.form.TimePicker',
xtype: 'timepickerfield',

requires: [
    'Ext.field.trigger.Clear'
],
setMe: function(t){
    this.val = t;
},
getMe: function(){
    return this.val;
},
initialize: function (a, b, c) {
    var me = this;
    me.getComponent().on({
        keyup: 'onKeyUp',
        input: 'onInput',
        focus: 'onFocus',
        blur: 'onBlur',
        paste: 'onPaste',
        mousedown: 'onMouseDown',
        scope: this
    });
},

listeners: {
    focus: function (a, b, c, d) {
        var me = this,
            hours = new Array(), 
            minutes = new Array(),
            seconds = new Array(),
            i=0;
        // for hours
        while(i < 24){
            var j = i;
            if(i < 10) j = '0'+''+j;
            hours.push({
                text: j,
                value: j
            });
            i++
        }

        // for minutes
        i = 0;
        while(i < 60){
            var j = i;
            if(i < 10) j = '0'+''+j;
            minutes.push({
                text: j,
                value: j
            });
            i += 5;
        }

        // for Seconds
        i = 0;
        while(i < 60){
            var j = i;
            if(i < 10) j = '0'+''+j;
            seconds.push({
                text: j,
                value: j
            });
            i += 5;
        }

        var picker = Ext.create('Ext.Picker', {
            useTitles: true,
            listeners: {
                change: function (picker, value, eOpts) {

                    me.setValue(value.hour + ':' + value.minute + ':' + value.second);
                }
            },
            align: 'center',
            slots: [{
                xtype: 'spacer'
            },{
                name: 'hour',
                title: 'Hour',
                data: hours
            }, {
                name: 'minute',
                title: 'Minute',
                data: minutes
            },{
                name: 'second',
                title: 'Second',
                data: minutes
            },{
                xtype: 'spacer'
            }]
        });

        picker.show();
    }
}

});

and use it any where like other fields

{
 xtype: 'timepickerfield',
 name: 'time',
 label: 'Time',
  // other field options
 },