How to utilize UTC time in custom DateTimeField

I am trying to convert UTC timestamps to UTC Dates, modify those dates, and return the UTC timestamp of the selected date/time. Since the Ext.form.field.Date and Ext.form.field.Timefields use local time internally, I have to add 5 hours to the time and make sure the date stays the same, to retrieve the timestamp, I have to reverse the process and get the ISO timestamp (without milliseconds).

Everything seems to work OK, but when I select 2015-01-01T01:15:00Z the date field is set to the following day (01/02/2015; See Figure #1). I am not sure where I am failing to convert the date correctly?

jrXeJ.png

Figure #1: Date is set to next day.

After fiddling around a bit, It looks like I got the date correct, but now the time field complains (SeeFigure #2). Looks like the value that was set is removed from the time drop-down. This is extremely confusing.

Code:

setValue: function (value) {    // ...    if (value != null && Ext.isDate(value)) {        var timeDate = Ext.clone(value);        timeDate.setFullYear(1970, 0, 1);        me.lookupReference('dateField').setValue(            Ext.Date.add(value, Ext.Date.MILLI, timeDate.getTime()));        me.lookupReference('timeField').setValue(me.convertFromUTC(timeDate));    }    // ...}

Ixupx.pngFigure #2: Time field validation fails.
You can access a demo of the following code at the following sites: DateTime.components.DateTimeField

Code:

Ext.define('DateTime.components.DateTimeField', {    extend: 'Ext.container.Container',    mixins: ['Ext.form.field.Field'],    alias: 'widget.datetimefield',    config: {        dateConfig: {},        timeConfig: {},        utcValue: true,        hideDate: false    },    referenceHolder: true,    layout: {        type: 'hbox'    },    initComponent: function () {        var me = this,            today = new Date(),            dateConfig = me.dateConfig,            timeConfig = me.timeConfig;        me.items = [Ext.apply({            xtype: 'datefield',            reference: 'dateField',            fieldLabel: 'Date',            value: today,            ignoreOnSubmit: true,            listeners: {                change: function (field, newValue, oldValue) {                    me.fireEvent('dateFieldChange', field, newValue, oldValue);                }            }        }, dateConfig),        Ext.apply({            xtype: 'timefield',            reference: 'timeField',            format: 'H:i',            value: '00:00',            minValue: '00:00',            maxValue: '24:00',            increment: 15,            padding: '0 0 0 10',            width: 80,            ignoreOnSubmit: true        }, timeConfig)];        me.callParent();    },    afterRender: function () {        var me = this;        if (me.hideData) {            me.lookupReference('dateField').hide();        }        me.callParent();    },    getValue: function () {        var me = this,            dateValue = me.getDate(),            timeValue = me.getTime();        if (dateValue != null && timeValue != null) {            dateValue = Ext.Date.add(dateValue, Ext.Date.MILLI, timeValue);        }        return this.convertToUTC(dateValue);    },    setValue: function (value) {        var me = this;        if (value == null) {            return;        }        if (Ext.isString(value)) {            value = Ext.Date.parse(value, 'c');        }        // Debug        console.log('Parsed Date: ' + value);        if (value != null && Ext.isDate(value)) {            var timeDate = Ext.clone(value);            timeDate.setFullYear(1970, 0, 1);            timeDate = me.convertFromUTC(timeDate);            me.lookupReference('dateField').setValue(            Ext.Date.add(value, Ext.Date.MILLI, timeDate.getTime()));            me.lookupReference('timeField').setValue(timeDate);        }    },    getInputId: function () {        return null;    },    getTime: function () {        var me = this,            timeValue = me.lookupReference('timeField').getValue();        timeValue.setFullYear(1970, 0, 1);        timeValue = this.convertToUTC(timeValue, this.getDate());        return timeValue.getTime();    },    getDate: function () {        return this.lookupReference('dateField').getValue();    },    setDate: function (value) {        this.lookupReference('dateField').setValue(value);    },    convertToUTC: function (date, dateOffset) {        if (dateOffset == null) {            dateOffset = date;        }        if (this.utcValue) {            return Ext.Date.subtract(date, Ext.Date.MINUTE, dateOffset.getTimezoneOffset());        }        return date;    },    convertFromUTC: function (date, dateOffset) {        if (dateOffset == null) {            dateOffset = date;        }        if (this.utcValue) {            return Ext.Date.add(date, Ext.Date.MINUTE, dateOffset.getTimezoneOffset());        }        return date;    }});

How to utilize UTC time in custom DateTimeField