Date picker off by one day ahead, mvvm, client/server same time zone

[Jeff]

Hi, and thanks for any help you can provide.

Here are some snippets from my MVVM code:

<div id="manageUser">
<div class="large-8 medium-8 columns">
<input id="StartDate"
   data-role="datepicker" 
   data-format="dd/MM/yyyy"
   data-bind="value: StartDate" />
</div>
</div>

<script>
    var viewModelManageUser = kendo.observable({
        ...
        StartDate: null,
        ...,
        GetTranslator: function() {
            var manageUserRequest = { ManageUser: { AssociateID: ascID }};
            gateway.getFromService(manageUserRequest, function(e) {
               ... 
               if(e.Translator != null)
               {
                  ...
                  viewModelManageUser.set("StartDate", e.Translator.CreatedOn);
                  ...
               }    
            },
            function (e) {
                DisplayErrorMessage(e);
            }
        );
        ...
</script>

As you can see in the HTML, I declare an input (id = StartDate) with the following data- attributes:
   data-role="datepicker" 
   data-format="dd/MM/yyyy"
   data-bind="value: StartDate" />

Upon making the Ajax call to the server, the server code passes back a Translator.CreatedOn value of {1/13/2018 10:55:50 PM} from the database. Note both the client and the server are in the same time zone, (UTC-06:00) Central Time (US & Canada).

Using Chrome v70 Developer Tools, I can see the the argument successfully returned from the Ajax request has an e.Translator.CreatedOn value of "/Date(1515905750950-0000)/".

Again in Debug Tools, after the view model field, StartDate, is populated from the Ajax response, within the console I can see that viewModelManageUser.get("StartDate") returns a value of "/Date(1515905750950-0000)/".

Using the following tool, I can verify that the JavaScript date assigned to the StartDate view model field equates to Jan 13 2018 22:55:50. This value exactly matches the value returned from the database.

http://esqsoft.com/javascript_examples/date-to-epoch.htm
   Option 2: Enter an epoch time value
   New Epoch Time Value:
      1515905750950-0000
   Conversion Output:
      Sat Jan 13 2018 22:55:50 GMT-0600 (Central Standard Time)

However, once the page finishes rendering, the value displayed on client within the bound Date Picker is as follows: 
Start date 14/01/2018

I understand the effect of UTC on dates and relative rules of time zones. What I don't understand is, if the client and server are in the same timezone, and the JavaScript date matches the server date, why does the date picker display StartDate one day into the future relative to the server date?

I am using Kendo version 2018.1.117.

Thanks,
Jeff

[Jeff]

Apologies. Just realized I posted this question on the wrong thread. Please ignore.

[Alex Hajigeorgieva]

Hi, Jeff,

I believe that you posted the question in the right forum thread in the first place, however,  we are able to transfer threads from one forum to another.
So in case you post an item in the wrong thread, just add another message so we can move it and save you from writing it again.

Now, for your question regarding the dates. The Kendo UI DatePicker does not change the dates - what happens is - the date is initialized in the browser and the browser adds the timezone offset to the date. You can verify that in the console by creating an instance from the ticks. This is what I get in my timezone:


 
You can offset the date before passing it to the Kendo UI DatePicker with kendo.timezone.apply() method if you like or write your own:

https://dojo.telerik.com/@bubblemaster/AhaWaYeg

* If you wish to use the kendo timezones apply() method, you need to include the script  which contains it:

<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.timezones.min.js"></script>

Let me know in case I can assist you further.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Jeff]

Hi Alex,

Thanks for your reply. I understand what you posted. I makes sense to me. But what I don't understand is my browser and my server are in the same time zone. 

The value passed from the server matches the ticks in the JavaScript date coming back from the Ajax call. During the binding to the date picker, the ticks are still as expected. But the date displayed in the bound control is off by a day.

I hope the attached image helps explain better.

 

 

 

[Alex Hajigeorgieva]

Hello, Jeff,

Thank you for the provided screenshot.

I did some additional source debugging and it turns out that the Kendo UI DatePicker does change the date!

The reason for this behaviour is the timezone offset of the Date string - it is showing 0 while it should be -6 hours for your timezone:



https://dojo.telerik.com/@bubblemaster/ekEJiSox

Here is what happens:

- when the line here runs, the StartDate is actually a string, not a date. This causes the Kendo UI DatePicker to parse the date as a Microsoft formatted date with an offset. In the internal function internalParseDate the date undergoes the unwanted transformation because of the time zone offset within its format. Kendo gets the current timezone (-6) and applies the offset as suggested by "-0000" portion. And this is what moves the date forward.

viewModelManageUser.set("StartDate", e.Translator.CreatedOn);

https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.core.js#L1517

So the alternatives would be to:

- provide the dates from the server with the correct offset (-6 hours)
- convert to a Date object before calling the set() method. E.g. split the date string and remove the "-0000" portion. Then you may pass it as is or use kendo.parseDate()
- provide a Date format which does not have the timezone portion from the server ("-0000")

I hope this explains it better. Let me know in case further questions arise.

Regards,
Alex Hajigeorgieva
Progress Telerik

[Jeff]

Thanks Alex. That makes sense. I appreciate the help!