CODEWITHSUNDEEP
javascriptdategridextjs4.1utc
user1304444
user1304444

Reputation: 1753

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.

Upvotes: 2

Views: 2240

Answers (2)

user2690751
user2690751

Reputation: 1

I don't think this has to do with timestamp. Looking at the source code for encodeDate ... it looks like ExtJS increments the month, but not the day. I'm guessing this was their attempt at a fix. I got around it by overriding encodeDate in my javascript: 

var fFbegin_settle_date = new Date();

Ext.util.JSON.encodeDate = function(fFbegin_settle_date) {
     //didn't work: return fFdateBegin.format('"Y-m-d"');
    pad = function(n) {
        return n < 10 ? "0" + n : n;
    }
    return '"' + fFdateBegin.getFullYear() + "-" +
    pad(fFdateBegin.getMonth()+1) + "-" +
    pad(fFdateBegin.getDate()+1) + '"';
};

Upvotes: 0

user1304444
user1304444

Reputation: 1753

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.

Upvotes: 1

Related Questions