PDA

View Full Version : Date displayed incorrectly in grid due to time zone issue



javadecaf
27 Aug 2013, 6:09 AM
Hello all:

Although I have been working with ExtJS, on and off, for quite some time, I'm still pretty much a novice, so I'm hoping there might be a very simple answer to this question. I have a grid, which uses the following data model:



Ext.define('Maverick.dataModel.oasisReports', { extend: 'Ext.data.Model',
fields: [ 'vin', 'client', 'path', {
name: 'date',
type: 'date',
format: 'Y-m-d'
}]
});


and the following column definition:



columns: [
{
text: 'VIN',
width: 200,
dataIndex: 'vin'
},
{
text: 'Printed By',
width: 125,
dataIndex: 'client',
filterable: true
},
{
text: 'Date Printed',
width: 150,
dataIndex: 'date',
filter: true
}
],


The "date" field is the problem: the data in that field is correctly stored in the DB (SQL Server) as a date in "Y-m-d" format. When it is parsed by ExtJS, however, it is transformed into a date/time, and the time is interpreted as 00:00 UTC. Since we are in U.S. Central Time (UTC -6) the parser changes the date/time to 6PM the previous day!

I have tried various methods to work around this, including changing the data type to a timestamp with a specified time (which made the grid column go blank). As I said, I feel there's probably a much simpler solution out there, but I've no idea where to start looking. Any help would be very much appreciated!

Gary Schlosberg
6 Sep 2013, 8:43 AM
Can we please see a sample of the JSON output coming from the database? There is probably something we can set to get this working without too much trouble.

ettavolt
8 Sep 2013, 11:27 PM
I've used following type to work with such data:


Ext.define('X.y.data.OnlyDate', {
singleton:true,
convert:function(v) {
var df = this.format || this.type.format,
parsed,
date,
clone = false;

if (!v) {
date = null;
} else if (Ext.isDate(v)) {
date = v;
clone = true;
} else if (df) {
date = Ext.Date.parse(v, df);
} else {
parsed = Date.parse(v);
date = parsed ? new Date(parsed) : null;
}
return date ? Ext.Date.clearTime(date, clone) : null;
},
format:'Y-m-d',
sortType:Ext.data.SortTypes.asDate,
type:'onlydate'
}, function() {
Ext.data.Types.ONLYDATE = this;
});

javadecaf
9 Sep 2013, 6:35 PM
ettavolt & Gary, thanks for your replies. In the interim, I found a workaround that did the trick, which was to specify a custom date parsing function for my date. (I regret that I can't remember where I found this code, but it is second-hand, and my thanks to the unnamed benefactor who posted it.)



Ext.Date.parseFunctions['Y-m-d'] = function(date, strict) {
// custom function to parse date - needed to work around time zone issue
var parts = date.split('-');
// new Date(year, month [, date [, hours[, minutes[, seconds[, ms]]]]])
parsedDate = new Date(parts[0], parts[1]-1, parts[2]); // months are 0-based
return parsedDate;
}


The essence of the solution is that the default date-parsing function in ExtJS is replaced with a custom function that doesn't try to apply a time zone difference. Your solution was probably much better, ettavolt, but I fear it was way over my head. Thanks again for the help!

Gary Schlosberg
10 Sep 2013, 3:27 PM
Glad to hear you found your solution and thanks for sharing back with the community.

inane
23 Oct 2014, 11:20 PM
Hi!!

In 2014 I have the same problem with my datepicker, could you tell me where you added the function??

Thanks a lot!

javadecaf
24 Oct 2014, 9:51 AM
At the top of my grid definition file, before the call to Ext.onReady(). What the above code does, according to my understanding, is to override the default date-parsing function used by ExtJS with a custom function that omits the timezone calculation. Hope this helps!