Material Datepicker widget in UTC timezone

Question

I need to show the material datepicker widget in the UTC timezone since our dates will all be shown in UTC. Since Moment.js hasn't been approved for use yet, I have to find a workaround. I have tried this method link. But it doesn't allow me to change the highlighted day when selected.

This creates an issue when clicking on the day highlighted because the datepicker doesnt update the model when the selected date is the same day.

@RafaqatAli Thanks for the article, but this isn't technically the issue. I need the datepicker widget to also use UTC time and not Locale time. — BStill
– BStill, Commented Dec 20, 2019 at 23:05
Another post here with two possible answers, one extends material function and the other uses moment.js: stackoverflow.com/questions/54288803/… — Nathaniel Flick
– Nathaniel Flick, Commented Jan 2, 2020 at 21:51
@NathanielFlick I tried that method, but I had issues with it not updating the selected date on the widget that you can click. It would have the correct date at the top of the widget, but the highlighted day below was off by a day. — BStill
– BStill, Commented Jan 2, 2020 at 21:54
Just realized that this screenshot is from using that method. As you can see the highlighted day is off. — BStill
– BStill, Commented Jan 2, 2020 at 22:49

BStill · Accepted Answer · 2020-01-02 21:47:38Z

0

I resolved this by adding a "hidden" date field that is tied to the calendar widget that I manually set to the "UTC" timezone. This date is still in browsers timezone, but the time is adjusted to match the UTC timezone so it displays correctly in the widget.

this.hiddenDate = new Date(this.date.getTime() + this.date.getTimezoneOffset() * 60000);

A better solution is to import the momentJS module if you have access to it.

answered Jan 2, 2020 at 21:47

BStill

9231 gold badge10 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dzmitry Vasilevsky Over a year ago

remember that for Western and Eastern timezones you need to add and substract timezone offset because JS method getTimezoneOffset always return positive value

Collectives™ on Stack Overflow

Material Datepicker widget in UTC timezone

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related