CODEWITHSUNDEEP
javascripttimezonedatejs
user2658183
user2658183

Reputation: 51

Displaying Timezone abbreviation with Date.js

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?

Upvotes: 5

Views: 5735

Answers (4)

Tommy Stanton
Tommy Stanton

Reputation: 756

bigeasy's Timezone seems to be a solution that gives you the time zone abbreviation, although as implied by @matt-johnson, abbreviations are not standardized.

Example of trying out Timezone with Node.js (followed the walk-through):

$ npm install timezone
$ node
> tz = require('timezone');
[Function]
> us = tz(require("timezone/America"));
[Function]
> us(us("2013-12-11 03:00"), "America/Detroit", "%Z")
'EST'
> us(us("2013-12-11 03:00"), "America/Los_Angeles", "%Z")
'PST'
> us(us("2013-10-11 03:00"), "America/Los_Angeles", "%Z")
'PDT'

Moment.js has an entry point "hook" for time zone abbreviations, but as far as I know there is not a library that takes advantage of this yet.

Upvotes: 0

Mohammed Safeer
Mohammed Safeer

Reputation: 21535

try moment timezone, http://momentjs.com/timezone/docs/#/zone-object/abbr/

<script>
   moment().tz("America/Los_Angeles").zoneAbbr();
</script>

Please note that include moment.js, moment-timezone.js and moment-timezone-data.js

Upvotes: 0

abritinthebay
abritinthebay

Reputation: 271

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).

Upvotes: 2

Matt Johnson-Pint
Matt Johnson-Pint

Reputation: 241525

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)"

Upvotes: 3

Related Questions