Hi, I'm recieving UTC dates from the server formatted as JSON, what I want to find out is how the grid handles UTC date. displaying the dates as local time received from the server and to the server when filering on date columns?
Please can u advice on how to resolve this issue.
Thanks in advanced.
Regards Christoff
Hi Christoff,
i am not sure i understand correctly - are you using the MVC wrapper? In that case the Microsoft JSON serializer sends dates in the format \/Date(1294268400000)\/. Then this is handled by the client-side code, i.e. this special format is recognized and parsed.
if you have some custom backend, which sends dates as strings, or as ticks, specifying the column "dateType" to be equal to "date" will automatically convert those to Date objects. This is done without adding any local offset, i.e. everything is assumed to be UTC and is not converted to local dates and times.
Let me know if this helps. Thanks,
Angel
Hey Angel
If I can explain this a little bit more clearly.
I receive the date from the server in the format: /Date(1334837100843)/ (Witch is an UTC date)
On the column definition I have:
{
headerText: "Received",
key: "Received",
dataType: "date",
format: "dateTime",
width: 45
},
After the date is rendered the date is displayed as: 4/19/2012 12:05 PM
But the correct local value should be: 4/19/2012 14:05 PM
If I project the value like so: new Date(1334837100843), I do get the correct 4/19/2012 14:05 PM value.
Another thing I am having trouble with is that your jquery editors do have support for culture information, but could not find the same functionality on the grid control.
Hi,
i will discuss with our product manager regarding any plans to add this feature to the grid. Thanks for the feedback, it's very valuable !
regarding the date format, i think it would be even more suitable to work with already parsed Date objects, because you can always get the ticks from that object, add the timezone offset milliseconds, and that will result in your local date.
here is an example that should work
function formatDate(theValue) {
var msUTC = theValue.UTC(); // assuming it's a Date object
var newVal = new Date(msUTC + offset);
// where offset can be taken like this: var offset = new Date().getTimezoneOffset();
return newVal;
}
Hope it helps. Thanks,
Hi Angel
Thanks for the response; I ended up using the following formatter function resulting into the correct local time.
formatter: function (date) { return Globalize.format( new Date(date.getTime() + (new Date().getTimezoneOffset() * -60000)), $.ig.regional.defaults.dateTimePattern); }
But it will be very appreciated if the grid could support UTC dates and local culture formats.
Thanks Christoff
I have to agree with Christoff here. I'm using 2012.1 latest greatest with oData and the DateTime columns in the database are local times, but when they get sent via JSON the WCF Data Service layer unfortunately converts them into UTC (if I recall, this is a feature of microsoft's json routines in general - if you use JSON.net instead it isn't an issue but unfortunately WCF Data Services are hard wired to use microsoft's own JSON routines).
it is easy enough to write a custom formatter, but it would be nice if we didn't have to as then things would just work out of the box. How about just adding a new format option called "dateTimeUTC" or something to signify that the underlying datasource is providing the time in UTC format even though we want to display it in local time format?
Actually, in looking at the 2012.1 documentation, it appears that there is an "enableUTCDates" property on the grid that might be the ticket on this problem, but unfortunately I don't think it currently is wired up to do anything. Can someone from Infragistics confirm or deny this???
Hi MolallaComm,
The "enableUTCDates" property is not inside the 12.1 Volume Release. However it will be in the next 12.1 Service Release (8th June).
The reason you're seeing it inside the documentation for 12.1 is a mixup in the documentation generation. As i mentioned the "enableUTCDates" is going to be in the next SR and documentation just got updated prematurely.
Thanks for pointing that out! Sorry for the confusion this may have caused.
Ivan Kosharov
Whoops! It seems that I didn't read Steven's blog post to the end :DNow I see that you suggest using his implementation of the dateFormat function (its ColdFusion counterpart was mentioned at the start of the article - this is why I became suspicious of ColdFusion to begin with)So sorry for the misunderstanding - I agree that using Steven's function is a good way to handle UTC/local dates.Cheers!
You just need to import the downloaded JS file in your page and you can use that function. Why it is difficult to use that function, I didn't understood.
I am not using Cold fusion framework but still I can use that. It's just a JS File and in JS File as well there is no ColdFusion Dependency as well. I don't know why you are relating this to ColdFusion framework.
Can you please explain, If I am wrong. So I can correct myself.
Thanks
Hi Jamil,Glad you found a solution that works for you :)However, I'd like to mention that as the article you linked to mentions, the dateFormat function comes from the Adobe's proprietary ColdFusion framework.Thus, this isn't a solution that can be easily applied by other people who aren't using that framework.Angel's suggestion is a bit more cumbersome, but it can be applied without the need for any other 3rd party framework or library.Cheers,Borislav
I solved my problem like this:
If you use this javascript library for date formating http://blog.stevenlevithan.com/archives/date-time-format
then you can use in your grid for specific date time column like this
....
columns: [ { headerText: "Read DateTime", key: "ReadDateTime", dataType: "date", formatter: function (date) { var currentDate = dateFormat(date, "dd/mm/yyyy HH:MM", true); console.log(currentDate); return currentDate; }, width: "185px" } ]
dateFormat(yourDateObject,formatmask,utcTrueOrFalse)
Example:
"2012-09-25T00:15:00" from web api controller or mvc controller action.
"25/09/2012 00:15" after using this function. If I don't use this function and only use igrid format: "dd/MM/yyyy HH:mm" it renders "25/09/2012 01:15".
just to confirm, this property does exactly what you have requested and expect - it treats and converts all dates to UTC, when enabled. for that purpose, all of this api is used
- getUTCFullYear()
- getUTCMonth()
- getUTCDate()
as compared to the equivalent Date object api, but without the "UTC" part
hope it helps. thanks,