Need to show hours as 07:00, 15:00, 23:00 (8 hrs increment) in EXTJs timefield

Question

I need to show hours as 07:00, 15:00, 23:00 (8 hrs increment) in EXTJs timefield, but when I used the following code, it is not giving the desired output, can some one help me, if I am missing something.

Ext.create('Ext.form.Panel', {
    title: 'Time Card',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'timefield',
        name: 'in',
        fieldLabel: 'Time In',
        format : 'H:i',
        minValue: '07:00',
        maxValue: '23:00',
        increment: 480,
        anchor: '100%'
    }]
});

Thanks in Advance.

Guilherme Lopes · Accepted Answer · 2015-02-12T17:25:49.920

You have a little problem here, because the Time Picker doesn't work the way you are trying to make it work. I'll break it up so you have an idea:

1) Get all hours within 24 hours (from 00 to 23).

2) A method will be used to push the times from 00 to 23 every increment minutes. e.g. (if you set increment: 60, then you will get 00:00, 01:00, 02:00)

3) This dataset will be returned to your Time field and a filter will be applied to it using your minValue and MaxValue

So with your settings of 480 what you will get is: 00:00, 08:00, 16:00.

Then applying the filters (minValue: 07:00 and maxValue: 23:00) will cut the first one out leaving you with 08:00 and 16:00.

Basically what you want is that the first interval would be 7 hours and then 8 hours after the first loop, so you will need to apply an override like this:

**** I haven't tested this thoroughly, so you might be careful if you wanna use this with different time intervals. ***

    Ext.define('Ext.picker.override.Time',{
        override: 'Ext.picker.Time',
        statics: {
            createStore: function(format, increment, startHour) {
                var dateUtil = Ext.Date,
                    clearTime = dateUtil.clearTime,
                    initDate = this.prototype.initDate,
                    times = [],
                    min = clearTime(new Date(initDate[0], initDate[1], initDate[2])),
                    startHour = startHour || min,
                    max = dateUtil.add(clearTime(new Date(initDate[0], initDate[1], initDate[2])), 'mi', (24 * 60) - 1),
                    firstIncrement = startHour.getHours() * 60,
                    count = 0;

                while(min <= max){
                    times.push({
                        disp: dateUtil.dateFormat(min, format),
                        date: min
                    });
                    min = dateUtil.add(min, 'mi', (count++ == 0 ? firstIncrement : increment));
                }

                return new Ext.data.Store({
                    model: Ext.picker.Time.prototype.modelType,
                    data: times
                });
            }
        }
    });
    Ext.define('Ext.form.field.CustomTime',{
        extend: 'Ext.form.field.Time',
        alias: 'widget.customtimefield',
        initComponent: function() {
            var me = this,
                min = me.minValue,
                max = me.maxValue;

            if (min) {
                me.setMinValue(min);
            }
            if (max) {
                me.setMaxValue(max);
            }
            me.displayTpl = new Ext.XTemplate(
                '<tpl for=".">' +
                '{[typeof values === "string" ? values : this.formatDate(values["' + me.displayField + '"])]}' +
                '<tpl if="xindex < xcount">' + me.delimiter + '</tpl>' +
                '</tpl>', {
                    formatDate: me.formatDate.bind(me)
                });

            // Create a store of times.
            me.store = Ext.picker.Time.createStore(me.format, me.increment, me.minValue);

            me.superclass.superclass.initComponent.call(this);

            // Ensure time constraints are applied to the store.
            // TimePicker does this on create.
            me.getPicker();
        } 
    });

    Ext.create('Ext.form.Panel', {
        title: 'Time Card',
        width: 300,
        bodyPadding: 10,
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'customtimefield',
            name: 'in',
            fieldLabel: 'Time In',
            format : 'H:i',
            minValue: '07:00',
            maxValue: '23:00',
            increment: 480,
            anchor: '100%'

        }]
    });

Fiddle: https://fiddle.sencha.com/#fiddle/i3e

Thank You very much Guilherme for your response, I'll check and let you know. — Ashok, Feb 12 '15 at 04:12
Guilherme, when I am selecting on the hour like 15:00, it is not populating in the field. — Ashok, Feb 12 '15 at 05:51
Oops..sometimes ExtJS doesn't play nice when you override the initComponent like that, so I replaced the code creating an Extended Class from field.Time and updated the fiddle. This should do the trick for you. — Guilherme Lopes, Feb 12 '15 at 17:22

Need to show hours as 07:00, 15:00, 23:00 (8 hrs increment) in EXTJs timefield

1 Answers1