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/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?
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./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?
Share Improve this question edited Aug 6, 2013 at 21:54 Matt Johnson-Pint 242k75 gold badges464 silver badges609 bronze badges asked Aug 6, 2013 at 19:24 user2658183user2658183 511 silver badge2 bronze badges4 Answers
Reset to default 3A 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 e 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)"
Updated version of the DateJS core code (and will be fixing open bugs in the future) available here:
https://github./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).
try moment timezone, http://momentjs./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
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.