How to have datefield show date from a different timezone?

[SebTardif]

This is the solution I came up with, you will need http://momentjs.com/ third party library:

Ext.define('Acme.view.TimezoneDateField', {
    extend : 'Ext.form.FieldContainer',
    alias : 'widget.timezonedatefield',
    layout : 'fit',
    publishes : 'value',
    config : {
        value : null,
        timezone : 'America/New_York'
    },
    initComponent : function() {
        var me = this;
        me.callParent();
        me.add({
            xtype : 'datefield',
            bind : '{modifiedGmtDate}'
        });
        this.getViewModel().bind('{modifiedGmtDate}', function(newValue, oldValue, bind) {
            // change back it from real gmt from our fake gmt that was matching local
            if (newValue) {
                var gmtToSet = moment.tz(moment(newValue).format('YYYY-MM-DD'), 'YYYY-MM-DD', this.getTimezone()).toDate();
                this.setValue(gmtToSet);
            } else {
                this.setValue(null);
            }
        }, this);
    },
    viewModel : {
        data : {
            modifiedGmtDate : undefined
        }
    },
    setValue : function(value) {
        // change the value so that the day match current local
        // don't care about hour
        var modifiedGmtToSet = value;
        // check if need to do anything
        if (value) {
            modifiedGmtToSet = moment(moment(value).tz(this.getTimezone()).format('YYYY-MM-DD'), 'YYYY-MM-DD').toDate();
        }


        this.getViewModel().set('modifiedGmtDate', modifiedGmtToSet);


        // the original gmt date
        this.callParent([ value ]);
    }
})

[Gary Schlosberg]

Thanks for sharing your solution with the community.