KendoUI parsing dates (fixing the bugs)


There are some bugs in KendoUI date parsing!!!

Don’t worry I already submitted it to KendoUI and they say:

This has been fixed with the Q2’12 service pack version (2012.2.913).

Commercial users can update to this version, while for the others the fix will be available with the Q3’12 release in mid November.

If you are not a commercial user, the good news is that you can fix them in the open-source version.

KendoUI parseDate bugs

The question is that you can parse the following string: 2012-08-26 using a format of hh:mm returning as result: Mon Jan 01 1900 20:12:00 GMT+0100 (CET) Where year 2012 ends up being 20 hours and 12 minutes of 1900, January 1st. Oops!

The second bug is that dates in ISO8601 are not considered as UTC and end up being shifted by your timezone.

KendoUI parseExact and checkLiteral bug

You can reproduce it using the following JavaScript code (also in here).

function traceDate(msg, obj) {
    $("#debug").append(msg + " : " + obj + "\n");
}

var date = new Date(2012, 8, 26, 12, 34, 56, 789);
traceDate("Original date                  ", date);
var str = kendo.toString(date, "yyyy-MM-dd");
traceDate("kendo.toString('yyyy-MM-dd')   ", str);
traceDate("kendo.parseDate('yyyy-MM-dd')  ", kendo.parseDate(str, "yyyy-MM-dd"));
traceDate("kendo.parseDate('yyyy.MM.dd')  ", kendo.parseDate(str, "yyyy.MM.dd"));
traceDate("kendo.parseDate('HH:mm')       ", kendo.parseDate(str, "HH:mm"));​

and as HTML simply:

</pre>
<pre id="#debug">

Producing as result:

Original date                   : Wed Sep 26 2012 12:34:56 GMT+0200 (CEST)
kendo.toString('yyyy-MM-dd')    : 2012-09-26
kendo.parseDate('yyyy-MM-dd')   : Wed Sep 26 2012 00:00:00 GMT+0200 (CEST)
kendo.parseDate('yyyy.MM.dd')   : null
kendo.parseDate('HH:mm')        : Mon Jan 01 1900 20:12:00 GMT+0100 (CET)

This displays:

  • the original date,
  • the date converted to string by kendo.toString and yyyy-MM-dd format
  • 2012-09-26 string parsed by kendo.parseDate and yyyy-MM-dd format
  • 2012-09-26 string parsed by kendo.parseDate and yyyy.MM.dd format (return null that is correct)
  • 2012-09-26 string parsed by kendo.parseDate and HH:mm format (returns 1900-01-01 20:12:00 CET that is incorrect!!!)

Solution

Search for checkLiteral function invocation in kendo.web.js or kendo.core.js and replace where it says:

checkLiteral();

by

if (!checkLiteral()) return;

and where it says:

ISO8601 = checkLiteral();

by

if (!checkLiteral()) return null;
ISO8601 = true;

KendoUI ISO8601 bug

For information on ISO 8601 take a look here. Why do I care about this format? Because is the one that I get when serialize Date objects using JSON.stringify that I commonly use to interface with my DB system (CouchDB) and hence I need to parse them back when I receive it from CouchDB.

If I have the following JavaScript code:

var date = new Date(2012, 8, 26, 12, 34, 56, 789);
var iso = JSON.stringify(date).replace(/"/g, '');
traceDate("Original date     ", date);
traceDate("date as ISO8601   ", iso);
traceDate("kendo.parseDate   ", kendo.parseDate(iso, "yyyy-MM-ddThh:mm:ss.fffZ"));

Where I define a date as 2012 september 26th and time 12 hours 34 minutes 56 seconds and 789 milliseconds. I convert it to ISO using JSON.stringify and then try to parse it back using Kendo.

NOTE: I had to remove extra quotes that were added to the ISO8601 representation of the date. I might have used date.toISOString() instead but I did want to stick to my actual scenario.

I get:

Original date      : Wed Sep 26 2012 12:34:56 GMT+0200 (CEST)
date as ISO8601    : 2012-09-26T10:34:56.789Z
kendo.parseDate    : Wed Sep 26 2012 10:34:56 GMT+0200 (CEST)

If you do not pay close attention to the output it might seem correct BUT it is not. If you realize, the original date was 12:34:56 GMT+0200 so if we convert it to Zulu time, it is: 10:34:56Z (two hours less). So, the conversion that we did using JSON.stringify (2012-09-26T10:34:56.789Z) is actually correct. BUT the result of parsing it back using Kendo UI is 10:34:56 GMT+0200 that is not correct.

Solution

Just have to look for exactParse in kendo.web.js or kendo.core.js and by the end of the function it says:

if (UTC) {
    if (hoursOffset) {
    hours += -hoursOffset;
}

if (minutesOffset) {
    minutes += -minutesOffset;
}

return new Date(Date.UTC(year, month, day, hours, minutes, seconds, milliseconds));
}

and replace it by:

if (UTC || ISO8601) {
    if (hoursOffset) {
        hours += -hoursOffset;
    }

    if (minutesOffset) {
        minutes += -minutesOffset;
    }

    return new Date(Date.UTC(year, month, day, hours, minutes, seconds, milliseconds));
}

If the date is in ISO8601 then we should use Date.UTC for building the date.

Need more help!

If you do not feel confident with the instructions on fixing it, please let me know and I will help you with the modified file.

Advertisements

5 thoughts on “KendoUI parsing dates (fixing the bugs)

  1. I have a issue that when i save the data with datepicker field it is sending one day less in this format 2014-07-09T18:30:00.000Z. What i am doing wrong ?

    • What I’d like to know is how you set the date. Do you do something like: new Date(2012, 8, 26, 12, 34, 56, 789);? or do you introduce the value opening the calendar widget and picking a date? This is important because Date uses days on 0 base (i.e. day 1 of a month is initialized setting it to 0)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s