Results 1 to 2 of 2

Thread: How to have datefield show date from a different timezone?

  1. #1
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,296
    Answers
    16

    Default How to have datefield show date from a different timezone?

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

    Code:
    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 ]);
        }
    })

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Thanks for sharing your solution with the community.

Similar Threads

  1. Replies: 3
    Last Post: 18 May 2015, 8:00 AM
  2. Replies: 0
    Last Post: 18 Aug 2011, 1:08 AM
  3. How to show date picker without datefield
    By amodg in forum Ext 3.x: Help & Discussion
    Replies: 13
    Last Post: 4 Jan 2010, 8:09 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •