Search code examples
javascriptdategridextjs4.1utc

extjs datecolumn shows date one day off


I have an Ext.grid with a datecolumn. Everything works fine, except that the dates are one day off.

I have found that when I add the data to the grid's store, the value is 2013-03-31. Later, when I look at the store's data, the value is Sat Mar 30 2013 17:00:00 GMT-0700 (US Mountain Standard Time)

Obviously, this is a Timezone problem, but I have no idea how to fix it.

Here is the code where I add the data to the grid's store

for (var i = 0; i < dateboxes.length; i++) 
{
    dateboxGrid.store.add(dateboxes[i]);
    //dateboxes[i].Value contains the date in this form: "2013-03-31"
}
console.log(dateboxGrid.getStore()) //logs "Sat Mar 30 2013 17:00:00 GMT-0700 (US Mountain Standard Time)"

What do I need to do to dateboxes[i].Value before I add it to the store to make sure the intended date shows in the column?

Update
I made the following change. When I save the date to the database, I first call .toISOString() on the data. Now, when the data is loaded into the store from the database, it is loaded as GMT +0700, and the date looks right when it's loaded into the field.
However...I'm afraid that means it will show up wrong for someone in a different timezone.

All I want is a Date. I don't even want to record time. It makes no sense in my application.


Solution

  • As I worked with this, I found that I either had to overcome one problem or the other.

    (1) If I used datecolumn with an editor of datefield, and the field in the store's model was of type: 'date' then the values would be stored in the database as dates (including time). When I tried to retrieve the dates, then the Timezone thing would kick in and change the date that was loaded.

    or

    (2) If I didn't use datecolumn and set the store's model to type: 'date' then dates weren't showing up in the cells. Even though they would get stored as simple strings, they didn't show up correctly in the grid.

    Here is what I came to: I used option (1), but before the store's data was sent to the database, I did this:

        for (var i = 0; i < dateboxes.length; i++) {
            if (dateboxes[i].Value != null) {
                var date = new Date(dateboxes[i].Value);
                dateboxes[i].Value = String(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate());
            }
        }
    

    This basically just changes the Date into a String. Now the data is stored in the database as a simple string. When it is displayed in the grid, there is no timezone information to mess it up. The code `(date.getMonth() +1)' is there, because month is 0 based.

    As I look back on the answer, something doesn't make sense. I must have also changed something else. Either way...it works now.

    I'll leave the question open for someone else to explain better what is going on.