Take a string date YYYY-MM-DD and convert it into a Date object that keeps the date the same within that users timezone?

Question

I am trying to take a string date YYYY-MM-DD and stick it into a date object to work with matDatePicker. The problem is that it shows yesterday's date. I did some digging and figured out that the problem is that Date stores objects as UTC and then converts to the current timezone.

I would skip using date entirely except that I want to use matDatePicker. However, because the date is only being loaded on the frontend, it doesn't really matter if it is accurate later on (it is not saved as a datetime, much to my chagrin). How do I load a Date object with a year month and day and set it to the users current timezone? I do not control what timezone the user will be in, so am looking for something timezone agnostic (i.e. I cannot just add 6 hours consistently).

Answer 1

If you are trying to convert a Date with format of YYYY-MM-DD where do you get the user's timezone from? An ISO string usually contains +0000 at the end of the string where the last parts is the timezone. Anyway, I am guessing you actually have a ISO string.

Problem is that when you parse Date objs it wants to convert the time relative to your local time. When you use UTC time it removes users timezone.

So what we could do, is take the users initial datetime.

let s = "2022-03-21T11:22:33+0000";
let d = new Date(Date.parse(s));

// Methods on Date Object will convert from UTC to users timezone
// Set minutes to current minutes (UTC) + User local time UTC offset

d.setMinutes(d.getMinutes() + d.getTimezoneOffset())

// Now we can use methods on the date obj without the timezone conversion

               // my local time is: "2022-03-21T07:22:33.000Z"
console.log(d) // "2022-03-21T09:22:33.000Z"