ngModel without timezone

[Iuliana Maria]

Hello,

In our application, we offer the users possibility to customize settings and save them inside MongoDB, and some of those settings are of DateTime/Time type. 

The problem is, that when the user sets a time inside the DateTime Picker (let's say 17 April 2020, 23:59), the value saved inside MongoDB is the serialized one, 2020-04-17T20:59:00.000Z  (I write the ngModel in console and I get Fri Apr 17 2020 23:59:00 GMT+0300 (Eastern European Summer Time), so the serialization is correct considering the time zone, but we need to save in database the exact date the users sets inside the DateTimePicker.

console.log(this.dateModel, JSON.stringify(this.dateModel)) writes
Fri Apr 17 2020 00:00:00 GMT+0300 (Eastern European Summer Time)
'"2020-04-16T21:00:00.000Z"'

What can be done so the DateTimePicker shows the date with the same time as when it is serialized?

PS. We have same functionality in an older application made with AngularJS, but there is no problem because the Date Picker for jQuery UI accepts strings as ng-model.

 

Thanks,

Iuliana

[Yanmario]

Hi Luliana,

Thank you for the additional details.

By default, all Kendo UI for Angular Date Input components selects a date in UTC with time and a time zone equal to the one used by the browser at the moment of the selection. This is valid for the DateTimePicker as well.

Please check the following GitHub comment to see why the dates are affected by the timezone:

https://github.com/telerik/kendo-angular/issues/578#issuecomment-335532468

There is also a feature request for the DateTimePicket to work in UTC when the locale of the machine is different:

https://feedback.telerik.com/kendo-angular-ui/1519656-i-need-a-datetimepicker-to-work-in-utc-when-this-is-different-to-the-local-machine-time-standard

Feel free to cast your vote and add any additional comments.

I also manage to update the example to show the UTC date:

https://stackblitz.com/edit/angular-awvqfd-ojhnw9?file=src%2Fapp%2Fapp.component.ts

Further adjustments or different approaches are in the hands of the developer.

Regards,
Yanmario
Progress Telerik

[Yanmario]

Hi Luliana,

Indeed the described behavior is the by design and the developer can format the date from our components by utilizing Intl package:

https://www.telerik.com/kendo-angular-ui/components/globalization/internationalization/parsing-and-formatting/#toc-date-formatting

Example demonstrating the suggested approach:

https://stackblitz.com/edit/angular-awvqfd?file=src/app/app.component.ts

The kendoDate pipe can also be used to format and display the value to the end user(demonstrated in the above example):

https://www.telerik.com/kendo-angular-ui/components/globalization/internationalization/api/DatePipe/

I hope this helps.

Regards,
Yanmario
Progress Telerik

[Iuliana Maria]

Hi Yanmario,

Thank you for the reply, but it still doesn't solve my issue.
I forked the example you gave me so I can explain better the problem, here is the link: https://stackblitz.com/edit/angular-awvqfd-7wyeuu?file=src%2Fapp%2Fapp.component.ts
I changed the Date Picker into a Date Time Picker and, if I set there a time and hour, the value inside Date Time Picker is displayed as 11/10/2000 1:30 AM, but the value serialized to json (and sent to the mongo) is "2000-11-09T23:30:00.000Z". (Note that in this case also the date is changed). The example is for the timezone GMT+0200 (Eastern European Standard Time)
Is there a way to make the Date Time Picker show the same value that is serialized to json, not depending on the timezone?

Thanks,

Iuliana

[Iuliana Maria]

Hi Yanmario,

Thank you for the solution!  We will try to implement it these days in our applciation.

[Yanmario]

Hi Luliana,

Sure, take your time for the implementation, and do share how it goes for you or if there are any additional questions on this matter.

Regards,
Yanmario
Progress Telerik