0

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.

mat datepicker

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.

BStill
  • 894
  • 1
  • 9
  • 33
  • It may help you https://stackoverflow.com/questions/56578738/angular-material-date-picker-date-parsing-utc-problem-1-day-before/56579305 – Rafaqat Ali Dec 20 '19 at 21:31
  • @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 Dec 20 '19 at 23:05
  • 1
    Another post here with two possible answers, one extends material function and the other uses moment.js: https://stackoverflow.com/questions/54288803/utc-date-for-mat-date-picker-in-angular-6 – Nathaniel Flick Jan 02 '20 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 Jan 02 '20 at 21:54
  • Just realized that this screenshot is from using that method. As you can see the highlighted day is off. – BStill Jan 02 '20 at 22:49

1 Answers1

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.

BStill
  • 894
  • 1
  • 9
  • 33
  • remember that for Western and Eastern timezones you need to add and substract timezone offset because JS method `getTimezoneOffset` always return positive value – Dzmitry Vasilevsky Mar 28 '23 at 09:30