I tried looking through various resources to see if this has been covered anywhere but was unable to find anything that solved this particular problem for Angular. My use case is that I have a date picker being used to enter a user's birth date. For this use case, time does not matter; it should be recognized as 10/27/2021 no matter where they are in the world. My problem is that if the user that initially creates this birth date lives in the Eastern US time zone, and then a second user that lives in the Central US time zone (1 hour behind), the date is shown as 10/26/2021 to them.
I understand the reason behind this. The javascript date type automatically adjusts to the user's local time. When the date was created, the date value was set as 10/27/2021 at midnight in the creating user's local time zone. Therefore when the viewing user retrieves it, its automatically adjusted 1 hour before that to 10/26/2021 11:00pm.
Nevertheless, this behavior makes the date input / date picker useless for calendar dates such as these, where time should not matter. My current preferred solution (although I am open to others if you have any) is to have the date be UTC time from front to back end. It gets created as a UTC (so 10/27/2021 at midnight in the UTC timezone, not local), sent to the back end server and stored as UTC, and then when retrieved, its displayed as UTC, not the user's local time.
I know that both UTC midnight date creation and date -> UTC string is possible with native javascript. Angular even has a native date pipe that accepts a parameter to denote which time zone you want the date to be adjusted to before creating the output string. I can't however find any sort of option for the date input component. The date being created at midnight UTC rather than midnight local time isn't a big deal; I could manually change that myself after creation by the component (although an optional parameter would be nice to avoid that). What I don't know how to do is get the date input to display the date after adjusting to UTC (similar to the date pipe example I mentioned). I would have expected it to maybe be some sort of option on the "format" input, but I wasn't able to find anything relating to timezone in the documentation. I also can't see any way to customize this myself as I only see the "date" type value exposed on the date picker component. While I could definitely manipulate this to get the output I want, it would completely trash the date value's integrity for any other usage.
Do you have any guidance for this issue? What do you recommend for proper "calendar date" usage when using these date components?
1 Answer, 1 is accepted
Hi Patrick,
Thank you for the provided extensive details. Indeed I agree with your observations. I can confirm that all Kendo UI for Angular DateInputs accept only a valid JavaScript Date as their value. When it comes to a scenario like yours where the time isn't important then you could store the dates as UTC midnight without a timezone on the server. When the dates are received on the client they can be instantiated as follows to avoid applying the local time zone to the time and date respectively:
new Date(date.getUTCFullYear(), date.getUTCMoth(), date.getUTCDate())I can further suggest checking the following StackOverflow thread for some more details on the matter:
https://stackoverflow.com/a/15171030/12396381
I hope the provided suggestion helps. Please let me know in case any further information is required for this case.
Regards,
Svet
Progress Telerik