(Sanity Check) Do I need a timezone library for this simple use case?

Question

This will be my first time working with time zones, I hear this is a major pain point for a lot of developers so I'm asking this question as a sanity check to make sure I'm not missing anything.

My use case is rather "simple", I want to have a date time picker where the user can choose their date and time in their local timezone (in other words what they see in the picker matches what their computer's date and time is set to).

Then I want to take this chosen date and time, convert it to UTC and send it to the server to be saved.

When the user goes to certain pages I take the UTC date/time coming back from the server and convert it to the user's local date/time and display it to them in a user friendly way.

Do I need a library like moment timezone for this or will the browser's native date methods like Intl.DateTimeFormat, new Date().getTimezoneOffset(), etc be enough? (I only need to support the latest modern browsers so I'm asking this from a "does it do what I need" ​point of view not a browser support POV).

It seems all I need are 2 things:

1. A way to get the user's timezone offset from UTC (so I can convert their local time to UTC to send to the server and also to convert UTC back to their local time to display it to them on certain pages)
2. A way get their timezone abbreviation (EST, PDT, CDT, etc) to show in the UI

Do I need a library for these? And if not why do people use such large libraries for working with timezones anyway?

Answer 1

You don't need a time zone library for the functionality you mentioned.

// Get a Date object from your date picker, or construct one
const d1 = new Date("2020-08-02T10:00");

// Convert it to a UTC-based ISO 8601 string for your back-end
const utcString = d1.toISOString();

// Later, you can create a new Date object from the UTC string
const d2 = new Date(utcString);

// And you can display it in local time
const s1 = d2.toString();

// Or you can be a bit more precise with output formatting if you like
const s2 = d2.toLocaleString(undefined, {timeZoneName: 'short'});

console.log("UTC: ", utcString);
console.log("Local Time (default string): ", s1);
console.log("Local Time (intl-based string): ", s2);

Keep in mind that not all time zones will have an abbreviation, so those ones will give output like "GMT+3".