3

I already tried the codes below, but they don't work because they include Date and\or Time. I need to get only the timezone name. (OBS: timezone name, not IANA Time Zone)

Is it possible to force toLocaleString() to show timeZoneName "short" and "long" at same time?

Example: 5/2/2021, 02:34:28 GMT+12:45 Chatham Standard Time

Get_TimeZone_Name(Functions) for Modern Browsers (2017-2018+) and for IE11!

<!DOCTYPE html>

<div id="Output"></div>

<script>

Date_Object = new Date();

document.getElementById("Output").innerText =
Date_Object.toLocaleString([], {timeZoneName:"short"}) + "\n" +
Date_Object.toLocaleDateString([], {timeZoneName:"short"}) + "\n" +
Date_Object.toLocaleTimeString([], {timeZoneName:"short"}) + "\n" +
"\n" +
Date_Object.toLocaleString([], {timeZoneName:"long"}) + "\n" +
Date_Object.toLocaleDateString([], {timeZoneName:"long"}) + "\n" +
Date_Object.toLocaleTimeString([], {timeZoneName:"long"}) + "\n" +
"\n" +
Date_Object.toLocaleString("en-US", {timeZoneName:"long"}) + "\n" +
Date_Object.toLocaleDateString("en-US", {timeZoneName:"long"}) + "\n" +
Date_Object.toLocaleTimeString("en-US", {timeZoneName:"long"}) + "\n" +
"\n" +
Date_Object.toLocaleString("pt-BR", {timeZoneName:"long"}) + "\n" +
Date_Object.toLocaleDateString("pt-BR", {timeZoneName:"long"}) + "\n" +
Date_Object.toLocaleTimeString("pt-BR", {timeZoneName:"long"}) + "\n" +
"\n" +
Date_Object.toLocaleString("ja-JP", {timeZoneName:"long"}) + "\n" +
Date_Object.toLocaleDateString("ja-JP", {timeZoneName:"long"}) + "\n" +
Date_Object.toLocaleTimeString("ja-JP", {timeZoneName:"long"}) + "\n" +
"\n" +
Date_Object.toLocaleString("ar-SA", {timeZoneName:"long"}) + "\n" +
Date_Object.toLocaleDateString("ar-SA", {timeZoneName:"long"}) + "\n" +
Date_Object.toLocaleTimeString("ar-SA", {timeZoneName:"long"}) + "\n" +
"";

</script>
user
  • 43
  • 5

2 Answers2

5

there you go, you just need 4 step:

  1. get simple date string
  2. get long time zone name
  3. get short time zone name
  4. append them together

see the code below 

let date = new Date();

let dateString = date.toLocaleString();

let shortTimeZone = getTimeZoneName(date,[],'short');

let longTimeZone = getTimeZoneName(date,[],'long');

console.log(`${dateString} ${shortTimeZone} ${longTimeZone}`)
  
/**
* date: Date = date object
* locales: string | [] = 'en-us' | []
* type: string = 'short' | 'long'
**/
function getTimeZoneName(date,locales,type) {
 return new Intl.DateTimeFormat(locales, { timeZoneName: type })
  .formatToParts(date)
  .find(part => part.type == "timeZoneName")
  .value
}

get this idea from ThirstyMonkey

you can find more usage of Intl.DateTimeFormat on MDN

YEN YEE
  • 566
  • 5
  • 10
  • 3
    You're mixing time zone and locale. `en-us` is a locale, not a time zone. – Matt Johnson-Pint May 03 '21 at 16:00
  • 1
    Yes it works, thanks! (Though, "formatToParts()" only works in modern browsers 2017-2018+, and, as @MattJohnson-Pint said, "timeZone" parameter should be replaced with "Locale" instead, and, a new parameter "Zone" should be added and used with {timeZone:Zone, timeZoneName: type}) – user May 03 '21 at 23:12
  • 1
    Thanks for pointing that out, I will fix that. – YEN YEE May 05 '21 at 00:06
1

there is no way to force .toLocaleString to show short timezone and long timezone at the same time how about using this solution

Date_Object = new Date();
myTimezoneFormat(Date_Object)

here is the myTimezoneFormat function

function myTimezoneFormat(date, locale="us") {
  return date.toLocaleString(locale, {timeZoneName:"short"}).split(" ").slice(2).join(" ")+" "+ date.toLocaleString(locale, {timeZoneName:"long"}).split(" ").slice(2).join(" ");
}
Bayu Setiawan
  • 69
  • 4