AM PM Meridian Time Picker for ExtJS and Netzke

custom_netzke_helpers.js

// Derived from:
// https://github.com/netzke/netzke-basepack/blob/83414d241de37eae9df7fc2af36951371ecb4c77/javascripts/xdatetime.js

//Override default netzke time entry field
Ext.define('Ext.ux.form.field.DateTime', {
    extend:'Ext.form.FieldContainer',
    mixins:{
        field:'Ext.form.field.Field'
    },
    alias: 'widget.xdatetime',

    //configurables

    combineErrors: true,
    msgTarget: 'under',
    layout: 'hbox',
    readOnly: false,

    dateFormat: 'Y-m-d',
    dateSubmitFormat: 'Y-m-d',
    timeFormat: 'H:i:s',
    timeSubmitFormat: 'H:i:s',
    dateConfig:{},
    timeConfig:{},


    // properties

    dateValue: null, // Holds the actual date

    dateField: null,

    hourField: null,
    minuteField: null,
    ampmField: null,

    initComponent: function(){
        var me = this
            ,i = 0
            ,key
            ,tab;

        me.items = me.items || [];

        me.dateField = Ext.create('Ext.form.field.Date', Ext.apply({
            format:me.dateFormat,
            flex:1,
            isFormField:false, //exclude from field query's
            submitValue:false,
            submitFormat: me.dateSubmitFormat,
            readOnly: me.readOnly
        }, me.dateConfig));
        me.items.push(me.dateField);

        me.hourField = Ext.create('Ext.form.field.Number', {
                maxWidth: 25,
                allowBlank: false,
                allowOnlyWhitespace: false,
                blankText: "Hour cannot be blank.",
                allowDecimals: false,
                maxValue: 12,
                minValue: 1,
                maxLength: 2,
                enforceMaxLength: 2,
                hideTrigger: true,
                submitValue:false,
                flex:1,
                fieldStyle:     "text-align:right;",
                isFormField:false, //exclude from field query's
            });
        me.items.push(me.hourField);

        me.colon = Ext.create('Ext.draw.Text', {
                text: ':',
                padding: '3 3 0 3'
          });
        me.items.push(me.colon);

        me.minuteField = Ext.create('Ext.form.field.Text', {
                maxWidth: 30,
                allowBlank: false,
                allowOnlyWhitespace: false,
                blankText: "Minutes cannot be blank.",
                regex: /[012345]\d/,
                maxLength: 2,
                enforceMaxLength: 2,
                submitValue:false,
                flex:1,
                isFormField:false, //exclude from field query's
            });
        me.items.push(me.minuteField);


        me.ampmField = Ext.create('Ext.form.ComboBox', {
              maxWidth: 45,
              value: 'PM',
              store: ['AM', 'PM'],
              forceSelection: true,
              flex:1,
              editable: false
          });

        me.items.push(me.ampmField);

        for (; i < me.items.length; i++) {
            me.items[i].on('focus', Ext.bind(me.onItemFocus, me));
            me.items[i].on('blur', Ext.bind(me.onItemBlur, me));
            me.items[i].on('specialkey', function(field, event){
                key = event.getKey();
                tab = key == event.TAB;

                if (tab && me.focussedItem == me.dateField) {
                    event.stopEvent();
                    me.timeField.focus();
                    return;
                }

                me.fireEvent('specialkey', field, event);
            });
        }

        me.callParent();

        // this dummy is necessary because Ext.Editor will not check whether an inputEl is present or not
        this.inputEl = {
            dom: document.createElement('div'),
            swallowEvent:function(){}
        };

        me.initField();
    },

    focus:function(){
        this.callParent(arguments);
        this.dateField.focus();
    },

    onItemFocus:function(item){
        if (this.blurTask){
            this.blurTask.cancel();
        }
        this.focussedItem = item;
    },

    onItemBlur:function(item, e){
        var me = this;
        if (item != me.focussedItem){ return; }
        // 100ms to focus a new item that belongs to us, otherwise we will assume the user left the field
        me.blurTask = new Ext.util.DelayedTask(function(){
            me.fireEvent('blur', me, e);
        });
        me.blurTask.delay(100);
    },

    getValue: function(){
        var value = null
            ,date = this.dateField.getSubmitValue()
            ,time = null
            ,format;

        hour = this.hourField.getValue();
        minute = this.minuteField.getValue();
        ampm = this.ampmField.getValue();
        time = Ext.Date.parse(hour + " " + minute + " " + ampm, 'g i A');
        time = Ext.Date.format(time, this.timeSubmitFormat);

        if (date){
            if (time){
                format = this.getFormat();
                value = Ext.Date.parse(date + ' ' + time, format);
            } else {
                value = this.dateField.getValue();
            }
        }
        return value;
    },

    getSubmitValue: function(){
//        var value = this.getValue();
//        return value ? Ext.Date.format(value, this.dateTimeFormat) : null;

        var me = this
            ,format = me.getFormat()
            ,value = me.getValue();

        return value ? Ext.Date.format(value, format) : null;
    },

    setValue: function(value){
        if (Ext.isString(value) || Ext.isDate(value)){

            if( Ext.isDate(value)){
              dt = value;
            }else{
              dt = new Date(value);
              value = Ext.Date.parse(value, this.getFormat()); //this.dateTimeFormat
            }
            this.dateField.setValue(value);

            hour = Ext.Date.format(dt, 'g');
            minute = Ext.Date.format(dt, 'i');
            ampm = Ext.Date.format(dt, 'A');

            this.hourField.setValue(hour);
            this.minuteField.setRawValue(minute);
            this.ampmField.setValue(ampm);
        }
    },

    getFormat: function(){
        value = (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeSubmitFormat || this.timeFormat);
        return value;
    },

    // Bug? A field-mixin submits the data from getValue, not getSubmitValue
    getSubmitData: function(){
        var me = this
            ,data = null;

        if (!me.disabled && me.submitValue && !me.isFileUpload()) {
            data = {};
            data[me.getName()] = '' + me.getSubmitValue();
        }
        return data;
    }
});