Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Working with timezones and daylight savings time in Javascript

Tags:

My single-page javascript app retrieves data in JSON format via REST calls. Dates come formatted using the UTC timezone in standard ISO8601 format, such as 2011-02-04T19:31:09Z.

When signing up for the service, users select their timezone from a drop down list. This timezone could be different than the user's browser's timezone. The javascript app knows what the user's selected timezone is at all times.

I know how to convert the UTC string into a date. I understand that Javascript only represents dates in the local timezone.

But I'm having troubles figuring out how to display a date formatted for a timezone OTHER than the user's local timezone. It must account for DST on all dates. Internally, I want to deal with all dates as UTC and only convert to string representation of a date in another timezone at display time. I need to display the dates in the timezone selected in the user's profile, not their browser's timezone.

I've experimented with the server sending the timezone offset difference in milliseconds between the user's browser's timezone and the user's profile timezone. But I've found I can't just send one offset value, but need to send an offset for every date to account for variations in DST.

Any suggestions or sample code on how to display dates formatted in various timezones? The options I've found so far:

  1. Server sends dates as strings already formatted in the right timezone and no date parsing or manipulation is done on the client. This makes doing certain things on the client difficult if not impossible.
  2. Use a library such as https://github.com/mde/timezone-js, which includes the entire Olson TZ database into Javascript. This means longer load times more memory usage, etc.
  3. Send a timezoneOffsetMillis value with every date sent to the client. This results in messy JSON data and non-optimal REST interfaces.

Are there any simpler or better solutions?

like image 486
Tauren Avatar asked Feb 04 '11 22:02

Tauren


People also ask

How does JavaScript handle different time zones?

The JavaScript getTimezoneOffset() method is used to find the timezone offset. It returns the timezone difference in minutes, between the UTC and the current local time. If the returned value is positive, local timezone is behind the UTC and if it is negative, the local timezone if ahead of UTC.

How does daylight savings work with time zones?

The simplest way to remember "time zone math" for the states that recognize Daylight saving time is three-two-one: three hours difference from Eastern to Pacific, two hours difference from Eastern to Mountain, and one hour difference from Eastern to Central.

How does UTC handle Daylight Savings?

The switch to daylight saving time does not affect UTC. It refers to time on the zero or Greenwich meridian, which is not adjusted to reflect changes either to or from Daylight Saving Time.


1 Answers

2 is a bad idea since, as you pointed out, it increases load times. If I were you I would do a combination of 1 and 3. I don't agree that this makes the JSON data messy or the REST interface non-optimal.

This is a classic tradeoff where to accept a bit more complexity in the protocol in order to simplify the client-side code.

like image 73
Michael Dillon Avatar answered Sep 19 '22 16:09

Michael Dillon