Date values are always off by one day

[champhandsome]

Hi,

Total noob here with Sencha stuff, but I have an application using ExtJS3 and for some reason my date values are always displayed as the previous day.

So July 1, 2011 in the database would be displayed as June 30, 2011 on the app. I've tried explicitly entering in a static date value to display and the result is the same.

This seems to be purely a date display issue and does not affect how dates are stored to the database.

Can anyone offer me any insight on how I can resolve this? Thanks!

[mitchellsimoens]

I'm doing this and it works fine for me

new Date().format('Y-m-d')

[champhandsome]

Hi Mitchell,

Thanks for the response. Unfortunately the problem still persists and it's still 1 day behind

[mercuri]

I'm having the same problem...what am I doing wrong?

This is my JSON data source:

{"totalCount":12,"dailyGroupTotals":[{"date":"2012-02-20","group_name":"Grocery","total_group":"8769.17"},{"date":"2012-02-20","group_name":"Meat","total_group":"8201.26"},{"date":"2012-02-20","group_name":"Produce","total_group":"1885.69"},{"date":"2012-02-21","group_name":"Grocery","total_group":"7648.46"},{"date":"2012-02-21","group_name":"Meat","total_group":"6359.98"},{"date":"2012-02-21","group_name":"Produce","total_group":"1651.09"},{"date":"2012-02-22","group_name":"Grocery","total_group":"7122.25"},{"date":"2012-02-22","group_name":"Meat","total_group":"5957.75"},{"date":"2012-02-22","group_name":"Produce","total_group":"1533.25"},{"date":"2012-02-23","group_name":"Grocery","total_group":"343.29"},{"date":"2012-02-23","group_name":"Meat","total_group":"235.11"},{"date":"2012-02-23","group_name":"Produce","total_group":"132.64"}]}

This is my rendering code:

Ext.require([    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*'
]);


Ext.onReady(function() {
    Ext.QuickTips.init();
    
    // setup the state provider, all state information will be saved to a cookie
    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));


	// create the data model
	Ext.define('Group', {
		extend: 'Ext.data.Model',
		fields: [
           {name: 'date',		type: 'date'},
           {name: 'group_name', 	type: 'string'},
           {name: 'total_group',	type: 'float'},
        ],
	});


    // create the data store
	
	var store = Ext.create('Ext.data.Store', {
    model: 'Group',
    proxy: {
        type: 'ajax',
        url : '/select6.php',
        reader: {
            type: 'json',
            root: 'dailyGroupTotals'
        }
    },
    autoLoad: true
});


    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        stateful: true,
        stateId: 'stateGrid',
        columns: [
            {
                text     : 'Date',
                width    : 100,
                sortable : true,
				//renderer : Ext.util.Format.dateRenderer('m-d'),
                dataIndex: 'date'
            },
            {
                text     : 'Group',
                width    : 100,
                sortable : true,
                dataIndex: 'group_name'
            },
            {
                text     : 'Total',
                width    : 150,
                sortable : true,
                renderer : 'usMoney',
				align: 'right',
                dataIndex: 'total_group'
            },
        ],
        height: 350,
        width: 600,
        title: 'Array Grid',
        renderTo: 'grid-example',
        viewConfig: {
            stripeRows: true
        }
    });
});

This is the resulting grid:

grid.png

[darthwes]

You're probably seeing the GMT offset being applied to your dates, subtracting a few hours based on where you live. I think you might get around it by converting the date values to UTC, just a guess. Something like

..., {
  name: 'myDate',
  convert: function (v) {
    return new Date(v+" UTC");
  }
},...

on your jsonreader might illuminate if that's the problem or not.

[mercuri]

	Ext.define('Group', {		extend: 'Ext.data.Model',
		fields: [
           {name: 'date',		type: 'date', dateFormat: 'Y-m-d'},
           {name: 'group_name', 	type: 'string'},
           {name: 'total_group',	type: 'float'},
        ],
	});

Thanks Wes! Your suggestion put me on the right track. All that was needed was the addition of the dateFormat attribute in my model config.

[Troy Wolf]

I'm late to the table, but I was having this exact issue with ExtJs 4.2 and confirmed I have the same issue with 3.4. The problem was that in my grid's model, I had this:

{name:"begin_dt", type:"string"}

When I should have had this:

{name:"begin_dt", type:"date", dateFormat: 'Y-m-d'}

That fixed the problem. In addition, I added this to the date columns in my columns list:

renderer: Ext.util.Format.dateRenderer('Y-m-d')

I Googled to figure this out. This page led me to the answer. Credit is due:
http://peterkellner.net/2011/08/24/g...-asp-net-mvc3/

[mitchellsimoens]

For a grid column, you may want to check out the date column which makes it a bit more user friendly: http://docs.sencha.com/ext/5.0/apido...id.column.Date

[nuridesengin]

Currently facing with exact same issue; defined `dateFormat: 'Y-m-d' and dateWriteFormat: 'Y-m-d' on Modelbut nothing changes on CRUD payload. It's 2018-06-05T21:00:00.000Z//But should be 2018-06-06T06:05:00.000Z