Displaying Timezone abbreviation with Date.js

Question

I have a script that reads the users timezone and displays a time according to users. How do I display the timezone abbreviation?

I have a gaming site, and on posts we write "We'll be playing live at 7:00". Users from around the world read our blog, and want to watch live. I have the following script that is supposed to read the users timezone, and displays the time according to where the user lives.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Localtime</title>
  </head>
  <body>
    We'll be playing live at <span class="localtime">7:00PM EDT</span>
    <script src="//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
    <script
      var els = document.getElementsByClassName('localtime');
      for (var i = 0, l = els.length; i < l; i++)
        els[i].innerHTML = 
          Date.parse(els[i].innerHTML).toLocaleString();
    </script>
  </body>
</html>

How do I display a user-specific timezone abbreviation beside the time, so users know that the time is based on their timezone?

Matt Johnson-Pint · Accepted Answer

A few things:

date.js has been abandoned. You should probably avoid using it.
Time zone abbreviations are ambiguous. See this list.
For example, if you output as "CST" - that could mean "Central Standard Time", "China Standard Time" or "Cuba Standard Time".
As far as I am aware, there aren't any libraries that will give you the abbreviation of the local time zone.
You can usually see some zone information with just Date().toString(), but it is highly dependent on the browser. It may come out as an abbreviation, or as a localized full name or id of the time zone, or not at all.
Perhaps you would be better just showing the offset. That would be standardized at least. You could do that with raw JavaScript or even easier with moment.js.
In the code you provided, there is no input date, so you're going to have a difficult time locking it in to a particular time zone. You are assuming that "EDT" is something that can be recognized by the date parser in all browsers, and that's not true.
The best approach would be to start with an exact moment (either as UTC or with an offset), then render that to the correct format. For example, (with moment.js)
```
var m = moment("2013-08-06T19:00:00-04:00"); // this is 7PM EDT
var s = m.format("HH:mm ([UTC]ZZ)");  // example: "16:00 (UTC-0700)"
```

abritinthebay · Answer

Updated version of the DateJS core code (and will be fixing open bugs in the future) available here:

https://github.com/abritinthebay/datejs/

However it sounds like you're just looking for DateJS's format or toString methods.

For example:

var tmp = Date.parse("2013-09-05T22:40:00Z");
var time = tmp.format("g:i A T");

this would leave time with the string "3:40 PM PDT"

This doesn't rely on internal browser issues as DateJS performs a lookup based on the offset for the date (which doesn't change per browser).

Displaying Timezone abbreviation with Date.js

Tags:

javascript

timezone

datejs

user2658183

2 Answers

Matt Johnson-Pint

abritinthebay

Recent Activity

Donate For Us

Displaying Timezone abbreviation with Date.js

Tags:

javascript

timezone

datejs

user2658183

2 Answers

Matt Johnson-Pint

abritinthebay

Related questions

Recent Activity

Donate For Us