javascript get html timezone dropdown

Question

I want to make a html timezone dropdown which will give me result like:

<select name="timezone">
    <option value="Europe/London">(GMT) London</option>
    ....
    ....
</select>

Is there any javascript library which will give me this result ?? Need help

You can use this -> http://www.freeformatter.com/time-zone-list-html-select.html — David R, Sep 01 '16 at 05:47
You can get all available 600 TimeZone here https://stackoverflow.com/a/62597910/410439 — Ravi Parekh, Jun 26 '20 at 15:24

hobberwickey · Answer 1 · 2019-04-11T11:13:28.403

I converted @Maulik Gangani answer into a json object for a more flexible solution

var tzStrings = [
    {"label":"(GMT-12:00) International Date Line West","value":"Etc/GMT+12"},
    {"label":"(GMT-11:00) Midway Island, Samoa","value":"Pacific/Midway"},
    {"label":"(GMT-10:00) Hawaii","value":"Pacific/Honolulu"},
    {"label":"(GMT-09:00) Alaska","value":"US/Alaska"},
    {"label":"(GMT-08:00) Pacific Time (US & Canada)","value":"America/Los_Angeles"},
    {"label":"(GMT-08:00) Tijuana, Baja California","value":"America/Tijuana"},
    {"label":"(GMT-07:00) Arizona","value":"US/Arizona"},
    {"label":"(GMT-07:00) Chihuahua, La Paz, Mazatlan","value":"America/Chihuahua"},
    {"label":"(GMT-07:00) Mountain Time (US & Canada)","value":"US/Mountain"},
    {"label":"(GMT-06:00) Central America","value":"America/Managua"},
    {"label":"(GMT-06:00) Central Time (US & Canada)","value":"US/Central"},
    {"label":"(GMT-06:00) Guadalajara, Mexico City, Monterrey","value":"America/Mexico_City"},
    {"label":"(GMT-06:00) Saskatchewan","value":"Canada/Saskatchewan"},
    {"label":"(GMT-05:00) Bogota, Lima, Quito, Rio Branco","value":"America/Bogota"},
    {"label":"(GMT-05:00) Eastern Time (US & Canada)","value":"US/Eastern"},
    {"label":"(GMT-05:00) Indiana (East)","value":"US/East-Indiana"},
    {"label":"(GMT-04:00) Atlantic Time (Canada)","value":"Canada/Atlantic"},
    {"label":"(GMT-04:00) Caracas, La Paz","value":"America/Caracas"},
    {"label":"(GMT-04:00) Manaus","value":"America/Manaus"},
    {"label":"(GMT-04:00) Santiago","value":"America/Santiago"},
    {"label":"(GMT-03:30) Newfoundland","value":"Canada/Newfoundland"},
    {"label":"(GMT-03:00) Brasilia","value":"America/Sao_Paulo"},
    {"label":"(GMT-03:00) Buenos Aires, Georgetown","value":"America/Argentina/Buenos_Aires"},
    {"label":"(GMT-03:00) Greenland","value":"America/Godthab"},
    {"label":"(GMT-03:00) Montevideo","value":"America/Montevideo"},
    {"label":"(GMT-02:00) Mid-Atlantic","value":"America/Noronha"},
    {"label":"(GMT-01:00) Cape Verde Is.","value":"Atlantic/Cape_Verde"},
    {"label":"(GMT-01:00) Azores","value":"Atlantic/Azores"},
    {"label":"(GMT+00:00) Casablanca, Monrovia, Reykjavik","value":"Africa/Casablanca"},
    {"label":"(GMT+00:00) Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London","value":"Etc/Greenwich"},
    {"label":"(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna","value":"Europe/Amsterdam"},
    {"label":"(GMT+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague","value":"Europe/Belgrade"},
    {"label":"(GMT+01:00) Brussels, Copenhagen, Madrid, Paris","value":"Europe/Brussels"},
    {"label":"(GMT+01:00) Sarajevo, Skopje, Warsaw, Zagreb","value":"Europe/Sarajevo"},
    {"label":"(GMT+01:00) West Central Africa","value":"Africa/Lagos"},
    {"label":"(GMT+02:00) Amman","value":"Asia/Amman"},
    {"label":"(GMT+02:00) Athens, Bucharest, Istanbul","value":"Europe/Athens"},
    {"label":"(GMT+02:00) Beirut","value":"Asia/Beirut"},
    {"label":"(GMT+02:00) Cairo","value":"Africa/Cairo"},
    {"label":"(GMT+02:00) Harare, Pretoria","value":"Africa/Harare"},
    {"label":"(GMT+02:00) Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius","value":"Europe/Helsinki"},
    {"label":"(GMT+02:00) Jerusalem","value":"Asia/Jerusalem"},
    {"label":"(GMT+02:00) Minsk","value":"Europe/Minsk"},
    {"label":"(GMT+02:00) Windhoek","value":"Africa/Windhoek"},
    {"label":"(GMT+03:00) Kuwait, Riyadh, Baghdad","value":"Asia/Kuwait"},
    {"label":"(GMT+03:00) Moscow, St. Petersburg, Volgograd","value":"Europe/Moscow"},
    {"label":"(GMT+03:00) Nairobi","value":"Africa/Nairobi"},
    {"label":"(GMT+03:00) Tbilisi","value":"Asia/Tbilisi"},
    {"label":"(GMT+03:30) Tehran","value":"Asia/Tehran"},
    {"label":"(GMT+04:00) Abu Dhabi, Muscat","value":"Asia/Muscat"},
    {"label":"(GMT+04:00) Baku","value":"Asia/Baku"},
    {"label":"(GMT+04:00) Yerevan","value":"Asia/Yerevan"},
    {"label":"(GMT+04:30) Kabul","value":"Asia/Kabul"},
    {"label":"(GMT+05:00) Yekaterinburg","value":"Asia/Yekaterinburg"},
    {"label":"(GMT+05:00) Islamabad, Karachi, Tashkent","value":"Asia/Karachi"},
    {"label":"(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi","value":"Asia/Calcutta"},
    {"label":"(GMT+05:30) Sri Jayawardenapura","value":"Asia/Calcutta"},
    {"label":"(GMT+05:45) Kathmandu","value":"Asia/Katmandu"},
    {"label":"(GMT+06:00) Almaty, Novosibirsk","value":"Asia/Almaty"},
    {"label":"(GMT+06:00) Astana, Dhaka","value":"Asia/Dhaka"},
    {"label":"(GMT+06:30) Yangon (Rangoon)","value":"Asia/Rangoon"},
    {"label":"(GMT+07:00) Bangkok, Hanoi, Jakarta","value":"Asia/Bangkok"},
    {"label":"(GMT+07:00) Krasnoyarsk","value":"Asia/Krasnoyarsk"},
    {"label":"(GMT+08:00) Beijing, Chongqing, Hong Kong, Urumqi","value":"Asia/Hong_Kong"},
    {"label":"(GMT+08:00) Kuala Lumpur, Singapore","value":"Asia/Kuala_Lumpur"},
    {"label":"(GMT+08:00) Irkutsk, Ulaan Bataar","value":"Asia/Irkutsk"},
    {"label":"(GMT+08:00) Perth","value":"Australia/Perth"},
    {"label":"(GMT+08:00) Taipei","value":"Asia/Taipei"},
    {"label":"(GMT+09:00) Osaka, Sapporo, Tokyo","value":"Asia/Tokyo"},
    {"label":"(GMT+09:00) Seoul","value":"Asia/Seoul"},
    {"label":"(GMT+09:00) Yakutsk","value":"Asia/Yakutsk"},
    {"label":"(GMT+09:30) Adelaide","value":"Australia/Adelaide"},
    {"label":"(GMT+09:30) Darwin","value":"Australia/Darwin"},
    {"label":"(GMT+10:00) Brisbane","value":"Australia/Brisbane"},
    {"label":"(GMT+10:00) Canberra, Melbourne, Sydney","value":"Australia/Canberra"},
    {"label":"(GMT+10:00) Hobart","value":"Australia/Hobart"},
    {"label":"(GMT+10:00) Guam, Port Moresby","value":"Pacific/Guam"},
    {"label":"(GMT+10:00) Vladivostok","value":"Asia/Vladivostok"},
    {"label":"(GMT+11:00) Magadan, Solomon Is., New Caledonia","value":"Asia/Magadan"},
    {"label":"(GMT+12:00) Auckland, Wellington","value":"Pacific/Auckland"},
    {"label":"(GMT+12:00) Fiji, Kamchatka, Marshall Is.","value":"Pacific/Fiji"},
    {"label":"(GMT+13:00) Nuku'alofa","value":"Pacific/Tongatapu"}
]

var tzInts = [
    {"label":"(GMT-12:00) International Date Line West","value":"-12"},
    {"label":"(GMT-11:00) Midway Island, Samoa","value":"-11"},
    {"label":"(GMT-10:00) Hawaii","value":"-10"},
    {"label":"(GMT-09:00) Alaska","value":"-9"},
    {"label":"(GMT-08:00) Pacific Time (US & Canada)","value":"-8"},
    {"label":"(GMT-08:00) Tijuana, Baja California","value":"-8"},
    {"label":"(GMT-07:00) Arizona","value":"-7"},
    {"label":"(GMT-07:00) Chihuahua, La Paz, Mazatlan","value":"-7"},
    {"label":"(GMT-07:00) Mountain Time (US & Canada)","value":"-7"},
    {"label":"(GMT-06:00) Central America","value":"-6"},
    {"label":"(GMT-06:00) Central Time (US & Canada)","value":"-6"},
    {"label":"(GMT-05:00) Bogota, Lima, Quito, Rio Branco","value":"-5"},
    {"label":"(GMT-05:00) Eastern Time (US & Canada)","value":"-5"},
    {"label":"(GMT-05:00) Indiana (East)","value":"-5"},
    {"label":"(GMT-04:00) Atlantic Time (Canada)","value":"-4"},
    {"label":"(GMT-04:00) Caracas, La Paz","value":"-4"},
    {"label":"(GMT-04:00) Manaus","value":"-4"},
    {"label":"(GMT-04:00) Santiago","value":"-4"},
    {"label":"(GMT-03:30) Newfoundland","value":"-3.5"},
    {"label":"(GMT-03:00) Brasilia","value":"-3"},
    {"label":"(GMT-03:00) Buenos Aires, Georgetown","value":"-3"},
    {"label":"(GMT-03:00) Greenland","value":"-3"},
    {"label":"(GMT-03:00) Montevideo","value":"-3"},
    {"label":"(GMT-02:00) Mid-Atlantic","value":"-2"},
    {"label":"(GMT-01:00) Cape Verde Is.","value":"-1"},
    {"label":"(GMT-01:00) Azores","value":"-1"},
    {"label":"(GMT+00:00) Casablanca, Monrovia, Reykjavik","value":"0"},
    {"label":"(GMT+00:00) Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London","value":"0"},
    {"label":"(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna","value":"1"},
    {"label":"(GMT+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague","value":"1"},
    {"label":"(GMT+01:00) Brussels, Copenhagen, Madrid, Paris","value":"1"},
    {"label":"(GMT+01:00) Sarajevo, Skopje, Warsaw, Zagreb","value":"1"},
    {"label":"(GMT+01:00) West Central Africa","value":"1"},
    {"label":"(GMT+02:00) Amman","value":"2"},
    {"label":"(GMT+02:00) Athens, Bucharest, Istanbul","value":"2"},
    {"label":"(GMT+02:00) Beirut","value":"2"},
    {"label":"(GMT+02:00) Cairo","value":"2"},
    {"label":"(GMT+02:00) Harare, Pretoria","value":"2"},
    {"label":"(GMT+02:00) Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius","value":"2"},
    {"label":"(GMT+02:00) Jerusalem","value":"2"},
    {"label":"(GMT+02:00) Minsk","value":"2"},
    {"label":"(GMT+02:00) Windhoek","value":"2"},
    {"label":"(GMT+03:00) Kuwait, Riyadh, Baghdad","value":"3"},
    {"label":"(GMT+03:00) Moscow, St. Petersburg, Volgograd","value":"3"},
    {"label":"(GMT+03:00) Nairobi","value":"3"},
    {"label":"(GMT+03:00) Tbilisi","value":"3"},
    {"label":"(GMT+03:30) Tehran","value":"3.5"},
    {"label":"(GMT+04:00) Abu Dhabi, Muscat","value":"4"},
    {"label":"(GMT+04:00) Baku","value":"4"},
    {"label":"(GMT+04:00) Yerevan","value":"4"},
    {"label":"(GMT+04:30) Kabul","value":"4.5"},
    {"label":"(GMT+05:00) Yekaterinburg","value":"5"},
    {"label":"(GMT+05:00) Islamabad, Karachi, Tashkent","value":"5"},
    {"label":"(GMT+05:30) Sri Jayawardenapura","value":"5.5"},
    {"label":"(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi","value":"5.5"},
    {"label":"(GMT+05:45) Kathmandu","value":"5.75"},
    {"label":"(GMT+06:00) Almaty, Novosibirsk","value":"6"},{"label":"(GMT+06:00) Astana, Dhaka","value":"6"},
    {"label":"(GMT+06:30) Yangon (Rangoon)","value":"6.5"},
    {"label":"(GMT+07:00) Bangkok, Hanoi, Jakarta","value":"7"},
    {"label":"(GMT+07:00) Krasnoyarsk","value":"7"},
    {"label":"(GMT+08:00) Beijing, Chongqing, Hong Kong, Urumqi","value":"8"},
    {"label":"(GMT+08:00) Kuala Lumpur, Singapore","value":"8"},
    {"label":"(GMT+08:00) Irkutsk, Ulaan Bataar","value":"8"},
    {"label":"(GMT+08:00) Perth","value":"8"},
    {"label":"(GMT+08:00) Taipei","value":"8"},
    {"label":"(GMT+09:00) Osaka, Sapporo, Tokyo","value":"9"},
    {"label":"(GMT+09:00) Seoul","value":"9"},
    {"label":"(GMT+09:00) Yakutsk","value":"9"},
    {"label":"(GMT+09:30) Adelaide","value":"9.5"},
    {"label":"(GMT+09:30) Darwin","value":"9.5"},
    {"label":"(GMT+10:00) Brisbane","value":"10"},
    {"label":"(GMT+10:00) Canberra, Melbourne, Sydney","value":"10"},
    {"label":"(GMT+10:00) Hobart","value":"10"},
    {"label":"(GMT+10:00) Guam, Port Moresby","value":"10"},
    {"label":"(GMT+10:00) Vladivostok","value":"10"},
    {"label":"(GMT+11:00) Magadan, Solomon Is., New Caledonia","value":"11"},
    {"label":"(GMT+12:00) Auckland, Wellington","value":"12"},
    {"label":"(GMT+12:00) Fiji, Kamchatka, Marshall Is.","value":"12"},
    {"label":"(GMT+13:00) Nuku'alofa","value":"13"}
]

To convert either to a select just to something like this

  function timezoneSelect(){
     var options = [],
         select = document.createElement("select");

     for (var i=0; i<tzs.length; i++){
       var tz = tzs[i],
           option = document.createElement("option");

       option.value = tz.value
       option.appendChild(document.createTextNode(tz.label))
       select.appendChild(option)
     }

     return select;
   }

Why are there two values for most locales in your list? For example, there are 2 entries for Cairo: `{"label":"(GMT+02:00) Cairo","value":"Africa/Cairo"}` and `{"label":"(GMT+02:00) Cairo","value":"2"}` — Abhishek Jain, Apr 11 '19 at 09:35
Good question, the answer is I don't know. But I'll edit the answer to create two lists instead of just the one. One where the values are a timezone string, the other an int — hobberwickey, Apr 11 '19 at 11:11
The problem with the `tzInts` solution is that your timezones will be wrong half the year because of daylight savings time. — Ken Kinder, Aug 11 '20 at 12:26

score 31 · Answer 2 · answered Sep 23 '17 at 03:10

I didn't find any list which I can use for my purposes so I created this from http://www.freeformatter.com/time-zone-list-html-select.html

<select name="timezone">
   <option></option>
   <option value="Etc/GMT+12">(GMT-12:00) International Date Line West</option>
   <option value="Pacific/Midway">(GMT-11:00) Midway Island, Samoa</option>
   <option value="Pacific/Honolulu">(GMT-10:00) Hawaii</option>
   <option value="US/Alaska">(GMT-09:00) Alaska</option>
   <option value="America/Los_Angeles">(GMT-08:00) Pacific Time (US & Canada)</option>
   <option value="America/Tijuana">(GMT-08:00) Tijuana, Baja California</option>
   <option value="US/Arizona">(GMT-07:00) Arizona</option>
   <option value="America/Chihuahua">(GMT-07:00) Chihuahua, La Paz, Mazatlan</option>
   <option value="US/Mountain">(GMT-07:00) Mountain Time (US & Canada)</option>
   <option value="America/Managua">(GMT-06:00) Central America</option>
   <option value="US/Central">(GMT-06:00) Central Time (US & Canada)</option>
   <option value="America/Mexico_City">(GMT-06:00) Guadalajara, Mexico City, Monterrey</option>
   <option value="Canada/Saskatchewan">(GMT-06:00) Saskatchewan</option>
   <option value="America/Bogota">(GMT-05:00) Bogota, Lima, Quito, Rio Branco</option>
   <option value="US/Eastern">(GMT-05:00) Eastern Time (US & Canada)</option>
   <option value="US/East-Indiana">(GMT-05:00) Indiana (East)</option>
   <option value="Canada/Atlantic">(GMT-04:00) Atlantic Time (Canada)</option>
   <option value="America/Caracas">(GMT-04:00) Caracas, La Paz</option>
   <option value="America/Manaus">(GMT-04:00) Manaus</option>
   <option value="America/Santiago">(GMT-04:00) Santiago</option>
   <option value="Canada/Newfoundland">(GMT-03:30) Newfoundland</option>
   <option value="America/Sao_Paulo">(GMT-03:00) Brasilia</option>
   <option value="America/Argentina/Buenos_Aires">(GMT-03:00) Buenos Aires, Georgetown</option>
   <option value="America/Godthab">(GMT-03:00) Greenland</option>
   <option value="America/Montevideo">(GMT-03:00) Montevideo</option>
   <option value="America/Noronha">(GMT-02:00) Mid-Atlantic</option>
   <option value="Atlantic/Cape_Verde">(GMT-01:00) Cape Verde Is.</option>
   <option value="Atlantic/Azores">(GMT-01:00) Azores</option>
   <option value="Africa/Casablanca">(GMT+00:00) Casablanca, Monrovia, Reykjavik</option>
   <option value="Etc/Greenwich">(GMT+00:00) Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London</option>
   <option value="Europe/Amsterdam">(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna</option>
   <option value="Europe/Belgrade">(GMT+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague</option>
   <option value="Europe/Brussels">(GMT+01:00) Brussels, Copenhagen, Madrid, Paris</option>
   <option value="Europe/Sarajevo">(GMT+01:00) Sarajevo, Skopje, Warsaw, Zagreb</option>
   <option value="Africa/Lagos">(GMT+01:00) West Central Africa</option>
   <option value="Asia/Amman">(GMT+02:00) Amman</option>
   <option value="Europe/Athens">(GMT+02:00) Athens, Bucharest, Istanbul</option>
   <option value="Asia/Beirut">(GMT+02:00) Beirut</option>
   <option value="Africa/Cairo">(GMT+02:00) Cairo</option>
   <option value="Africa/Harare">(GMT+02:00) Harare, Pretoria</option>
   <option value="Europe/Helsinki">(GMT+02:00) Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius</option>
   <option value="Asia/Jerusalem">(GMT+02:00) Jerusalem</option>
   <option value="Europe/Minsk">(GMT+02:00) Minsk</option>
   <option value="Africa/Windhoek">(GMT+02:00) Windhoek</option>
   <option value="Asia/Kuwait">(GMT+03:00) Kuwait, Riyadh, Baghdad</option>
   <option value="Europe/Moscow">(GMT+03:00) Moscow, St. Petersburg, Volgograd</option>
   <option value="Africa/Nairobi">(GMT+03:00) Nairobi</option>
   <option value="Asia/Tbilisi">(GMT+03:00) Tbilisi</option>
   <option value="Asia/Tehran">(GMT+03:30) Tehran</option>
   <option value="Asia/Muscat">(GMT+04:00) Abu Dhabi, Muscat</option>
   <option value="Asia/Baku">(GMT+04:00) Baku</option>
   <option value="Asia/Yerevan">(GMT+04:00) Yerevan</option>
   <option value="Asia/Kabul">(GMT+04:30) Kabul</option>
   <option value="Asia/Yekaterinburg">(GMT+05:00) Yekaterinburg</option>
   <option value="Asia/Karachi">(GMT+05:00) Islamabad, Karachi, Tashkent</option>
   <option value="Asia/Calcutta">(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi</option>
   <option value="Asia/Calcutta">(GMT+05:30) Sri Jayawardenapura</option>
   <option value="Asia/Katmandu">(GMT+05:45) Kathmandu</option>
   <option value="Asia/Almaty">(GMT+06:00) Almaty, Novosibirsk</option>
   <option value="Asia/Dhaka">(GMT+06:00) Astana, Dhaka</option>
   <option value="Asia/Rangoon">(GMT+06:30) Yangon (Rangoon)</option>
   <option value="Asia/Bangkok">(GMT+07:00) Bangkok, Hanoi, Jakarta</option>
   <option value="Asia/Krasnoyarsk">(GMT+07:00) Krasnoyarsk</option>
   <option value="Asia/Hong_Kong">(GMT+08:00) Beijing, Chongqing, Hong Kong, Urumqi</option>
   <option value="Asia/Kuala_Lumpur">(GMT+08:00) Kuala Lumpur, Singapore</option>
   <option value="Asia/Irkutsk">(GMT+08:00) Irkutsk, Ulaan Bataar</option>
   <option value="Australia/Perth">(GMT+08:00) Perth</option>
   <option value="Asia/Taipei">(GMT+08:00) Taipei</option>
   <option value="Asia/Tokyo">(GMT+09:00) Osaka, Sapporo, Tokyo</option>
   <option value="Asia/Seoul">(GMT+09:00) Seoul</option>
   <option value="Asia/Yakutsk">(GMT+09:00) Yakutsk</option>
   <option value="Australia/Adelaide">(GMT+09:30) Adelaide</option>
   <option value="Australia/Darwin">(GMT+09:30) Darwin</option>
   <option value="Australia/Brisbane">(GMT+10:00) Brisbane</option>
   <option value="Australia/Canberra">(GMT+10:00) Canberra, Melbourne, Sydney</option>
   <option value="Australia/Hobart">(GMT+10:00) Hobart</option>
   <option value="Pacific/Guam">(GMT+10:00) Guam, Port Moresby</option>
   <option value="Asia/Vladivostok">(GMT+10:00) Vladivostok</option>
   <option value="Asia/Magadan">(GMT+11:00) Magadan, Solomon Is., New Caledonia</option>
   <option value="Pacific/Auckland">(GMT+12:00) Auckland, Wellington</option>
   <option value="Pacific/Fiji">(GMT+12:00) Fiji, Kamchatka, Marshall Is.</option>
   <option value="Pacific/Tongatapu">(GMT+13:00) Nuku'alofa</option>
</select>

Why are there two values for most locales in your list? For example, there are 2 entries for Cairo: `{"label":"(GMT+02:00) Cairo","value":"Africa/Cairo"}` and `{"label":"(GMT+02:00) Cairo","value":"2"}` — Abhishek Jain, Apr 10 '19 at 07:46
There is only one Cairo in this answer. I think you make comment on wrong answer. — Maulik, Apr 10 '19 at 11:56
Daylight saving can affect this list greatly. Never hard-code timezones this way or you will be introducing bugs in your code that will be hard to track — Leo, Jul 16 '19 at 11:23
Daylight savings time is why you would store a value of `US/Eastern`, not UTC-4 (or 5), for example. — Ken Kinder, Aug 11 '20 at 12:25

score 21 · Answer 3 · answered Sep 01 '16 at 05:52

21

You can use moment-timezone:

Get list of time zones using moment.tz.names()
Get the zone object for each time zone by using moment.tz.zone(name)

answered Sep 01 '16 at 05:52

str

42,689
17
109
127

JuliSmz · Answer 4 · 2021-10-19T00:06:47.943

In my case I had to store in DB just the offset. I leave here the dropdown useful on my case:

<select name="timezone" id="timezone">
    <option value="-12">(UTC-12:00) International Date Line West</option>
    <option value="-11">(UTC-11:00) Coordinated Universal Time-11</option>
    <option value="-10">(UTC-10:00) Hawaii</option>
    <option value="-9">(UTC-09:00) Alaska</option>
    <option value="-7">(UTC-08:00) Baja California</option>
    <option value="-7">(UTC-07:00) Pacific Time (US &amp; Canada)</option>
    <option value="-8">(UTC-08:00) Pacific Time (US &amp; Canada)</option>
    <option value="-7">(UTC-07:00) Arizona</option>
    <option value="-6">(UTC-07:00) Chihuahua, La Paz, Mazatlan</option>
    <option value="-6">(UTC-07:00) Mountain Time (US &amp; Canada)</option>
    <option value="-6">(UTC-06:00) Central America</option>
    <option value="-5">(UTC-06:00) Central Time (US &amp; Canada)</option>
    <option value="-5">(UTC-06:00) Guadalajara, Mexico City, Monterrey</option>
    <option value="-6">(UTC-06:00) Saskatchewan</option>
    <option value="-5">(UTC-05:00) Bogota, Lima, Quito</option>
    <option value="-4">(UTC-05:00) Eastern Time (US &amp; Canada)</option>
    <option value="-4">(UTC-05:00) Indiana (East)</option>
    <option value="-4.5">(UTC-04:30) Caracas</option>
    <option value="-4">(UTC-04:00) Asuncion</option>
    <option value="-3">(UTC-04:00) Atlantic Time (Canada)</option>
    <option value="-4">(UTC-04:00) Cuiaba</option>
    <option value="-4">(UTC-04:00) Georgetown, La Paz, Manaus, San Juan</option>
    <option value="-4">(UTC-04:00) Santiago</option>
    <option value="-2.5">(UTC-03:30) Newfoundland</option>
    <option value="-3">(UTC-03:00) Brasilia</option>
    <option value="-3">(UTC-03:00) Buenos Aires</option>
    <option value="-3">(UTC-03:00) Cayenne, Fortaleza</option>
    <option value="-3">(UTC-03:00) Greenland</option>
    <option value="-3">(UTC-03:00) Montevideo</option>
    <option value="-3">(UTC-03:00) Salvador</option>
    <option value="-2">(UTC-02:00) Coordinated Universal Time-02</option>
    <option value="-1">(UTC-02:00) Mid-Atlantic - Old</option>
    <option value="0">(UTC-01:00) Azores</option>
    <option value="-1">(UTC-01:00) Cape Verde Is.</option>
    <option value="1">(UTC) Casablanca</option>
    <option value="0">(UTC) Coordinated Universal Time</option>
    <option value="0">(UTC) Edinburgh, London</option>
    <option value="1">(UTC+01:00) Edinburgh, London</option>
    <option value="1">(UTC) Dublin, Lisbon</option>
    <option value="0">(UTC) Monrovia, Reykjavik</option>
    <option value="2">(UTC+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna</option>
    <option value="2">(UTC+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague</option>
    <option value="2">(UTC+01:00) Brussels, Copenhagen, Madrid, Paris</option>
    <option value="2">(UTC+01:00) Sarajevo, Skopje, Warsaw, Zagreb</option>
    <option value="1">(UTC+01:00) West Central Africa</option>
    <option value="1">(UTC+01:00) Windhoek</option>
    <option value="3">(UTC+02:00) Athens, Bucharest</option>
    <option value="3">(UTC+02:00) Beirut</option>
    <option value="2">(UTC+02:00) Cairo</option>
    <option value="3">(UTC+02:00) Damascus</option>
    <option value="3">(UTC+02:00) E. Europe</option>
    <option value="2">(UTC+02:00) Harare, Pretoria</option>
    <option value="3">(UTC+02:00) Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius</option>
    <option value="3">(UTC+03:00) Istanbul</option>
    <option value="3">(UTC+02:00) Jerusalem</option>
    <option value="2">(UTC+02:00) Tripoli</option>
    <option value="3">(UTC+03:00) Amman</option>
    <option value="3">(UTC+03:00) Baghdad</option>
    <option value="3">(UTC+02:00) Kaliningrad</option>
    <option value="3">(UTC+03:00) Kuwait, Riyadh</option>
    <option value="3">(UTC+03:00) Nairobi</option>
    <option value="3">(UTC+03:00) Moscow, St. Petersburg, Volgograd, Minsk</option>
    <option value="4">(UTC+04:00) Samara, Ulyanovsk, Saratov</option>
    <option value="4.5">(UTC+03:30) Tehran</option>
    <option value="4">(UTC+04:00) Abu Dhabi, Muscat</option>
    <option value="5">(UTC+04:00) Baku</option>
    <option value="4">(UTC+04:00) Port Louis</option>
    <option value="4">(UTC+04:00) Tbilisi</option>
    <option value="4">(UTC+04:00) Yerevan</option>
    <option value="4.5">(UTC+04:30) Kabul</option>
    <option value="5">(UTC+05:00) Ashgabat, Tashkent</option>
    <option value="5">(UTC+05:00) Yekaterinburg</option>
    <option value="5">(UTC+05:00) Islamabad, Karachi</option>
    <option value="5.5">(UTC+05:30) Chennai, Kolkata, Mumbai, New Delhi</option>
    <option value="5.5">(UTC+05:30) Sri Jayawardenepura</option>
    <option value="5.75">(UTC+05:45) Kathmandu</option>
    <option value="6">(UTC+06:00) Nur-Sultan (Astana)</option>
    <option value="6">(UTC+06:00) Dhaka</option>
    <option value="6.5">(UTC+06:30) Yangon (Rangoon)</option>
    <option value="7">(UTC+07:00) Bangkok, Hanoi, Jakarta</option>
    <option value="7">(UTC+07:00) Novosibirsk</option>
    <option value="8">(UTC+08:00) Beijing, Chongqing, Hong Kong, Urumqi</option>
    <option value="8">(UTC+08:00) Krasnoyarsk</option>
    <option value="8">(UTC+08:00) Kuala Lumpur, Singapore</option>
    <option value="8">(UTC+08:00) Perth</option>
    <option value="8">(UTC+08:00) Taipei</option>
    <option value="8">(UTC+08:00) Ulaanbaatar</option>
    <option value="8">(UTC+08:00) Irkutsk</option>
    <option value="9">(UTC+09:00) Osaka, Sapporo, Tokyo</option>
    <option value="9">(UTC+09:00) Seoul</option>
    <option value="9.5">(UTC+09:30) Adelaide</option>
    <option value="9.5">(UTC+09:30) Darwin</option>
    <option value="10">(UTC+10:00) Brisbane</option>
    <option value="10">(UTC+10:00) Canberra, Melbourne, Sydney</option>
    <option value="10">(UTC+10:00) Guam, Port Moresby</option>
    <option value="10">(UTC+10:00) Hobart</option>
    <option value="9">(UTC+09:00) Yakutsk</option>
    <option value="11">(UTC+11:00) Solomon Is., New Caledonia</option>
    <option value="11">(UTC+11:00) Vladivostok</option>
    <option value="12">(UTC+12:00) Auckland, Wellington</option>
    <option value="12">(UTC+12:00) Coordinated Universal Time+12</option>
    <option value="12">(UTC+12:00) Fiji</option>
    <option value="12">(UTC+12:00) Magadan</option>
    <option value="13">(UTC+12:00) Petropavlovsk-Kamchatsky - Old</option>
    <option value="13">(UTC+13:00) Nuku'alofa</option>
    <option value="13">(UTC+13:00) Samoa</option>
</select>

Minor correction: Alaska value should be -9 instead of -8 – Sanjay Verma Oct 18 '21 at 04:15 — Sanjay Verma, Oct 18 '21 at 04:15
Thanks @SanjayVerma it was changed. – JuliSmz Nov 02 '21 at 21:51 — JuliSmz, Nov 02 '21 at 21:51

score 3 · Answer 5 · edited Feb 12 '21 at 20:29

const tzList = {
    "Etc/GMT+12": "(GMT-12:00) International Date Line West",
    "Pacific/Midway": "(GMT-11:00) Midway Island, Samoa",
    "Pacific/Honolulu": "(GMT-10:00) Hawaii",
    "US/Alaska": "(GMT-09:00) Alaska",
    "America/Los_Angeles": "(GMT-08:00) Pacific Time (US & Canada)",
    "US/Arizona": "(GMT-07:00) Arizona",
    "America/Managua": "(GMT-06:00) Central America",
    "US/Central": "(GMT-06:00) Central Time (US & Canada)",
    "America/Bogota": "(GMT-05:00) Bogota, Lima, Quito, Rio Branco",
    "US/Eastern": "(GMT-05:00) Eastern Time (US & Canada)",
    "Canada/Atlantic": "(GMT-04:00) Atlantic Time (Canada)",
    "America/Argentina/Buenos_Aires": "(GMT-03:00) Buenos Aires, Georgetown",
    "America/Noronha": "(GMT-02:00) Mid-Atlantic",
    "Atlantic/Azores": "(GMT-01:00) Azores",
    "Etc/Greenwich": "(GMT+00:00) Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London",
    "Europe/Amsterdam": "(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna",
    "Europe/Helsinki": "(GMT+02:00) Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius",
    "Europe/Moscow": "(GMT+03:00) Moscow, St. Petersburg, Volgograd",
    "Asia/Tehran": "(GMT+03:30) Tehran",
    "Asia/Yerevan": "(GMT+04:00) Yerevan",
    "Asia/Kabul": "(GMT+04:30) Kabul",
    "Asia/Yekaterinburg": "(GMT+05:00) Yekaterinburg",
    "Asia/Karachi": "(GMT+05:00) Islamabad, Karachi, Tashkent",
    "Asia/Calcutta": "(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi",
    "Asia/Katmandu": "(GMT+05:45) Kathmandu",
    "Asia/Dhaka": "(GMT+06:00) Astana, Dhaka",
    "Asia/Rangoon": "(GMT+06:30) Yangon (Rangoon)",
    "Asia/Bangkok": "(GMT+07:00) Bangkok, Hanoi, Jakarta",
    "Asia/Hong_Kong": "(GMT+08:00) Beijing, Chongqing, Hong Kong, Urumqi",
    "Asia/Seoul": "(GMT+09:00) Seoul",
    "Australia/Adelaide": "(GMT+09:30) Adelaide",
    "Australia/Canberra": "(GMT+10:00) Canberra, Melbourne, Sydney",
    "Asia/Magadan": "(GMT+11:00) Magadan, Solomon Is., New Caledonia",
    "Pacific/Auckland": "(GMT+12:00) Auckland, Wellington",
    "Pacific/Tongatapu": "(GMT+13:00) Nuku'alofa"
}

You have a great idea. What about wrapping it into a better answer with proper formatting and some clarification? And even maybe the runnable code example? — Farrukh Normuradov, Feb 12 '21 at 18:01

score 0 · Answer 6 · answered Jul 29 '21 at 16:05

For those who require the TimeSpan in the Select Option value field, I have yet converted the list by @Maulik Gangani to a JSON array, which may be used to populate dropdowns.

    var timeZones = [
        { "label": "International Date Line West (Etc/GMT+12)", "value": "-12:00" },
        { "label": "Midway Island, Samoa (Pacific/Midway)", "value": "-11:00" },
        { "label": "Hawaii (Pacific/Honolulu)", "value": "-10:00" },
        { "label": "Alaska (US/Alaska)", "value": "-09:00" },
        { "label": "Pacific Time (US & Canada) (America/Los_Angeles)", "value": "-08:00" },
        { "label": "Tijuana, Baja California (America/Tijuana)", "value": "-08:00" },
        { "label": "Arizona (US/Arizona)", "value": "-07:00" },
        { "label": "Chihuahua, La Paz, Mazatlan (America/Chihuahua)", "value": "-07:00" },
        { "label": "Mountain Time (US & Canada) (US/Mountain)", "value": "-07:00" },
        { "label": "Central America (America/Managua)", "value": "-06:00" },
        { "label": "Central Time (US & Canada) (US/Central)", "value": "-06:00" },
        { "label": "Guadalajara, Mexico City, Monterrey (America/Mexico_City)", "value": "-06:00" },
        { "label": "Saskatchewan (Canada/Saskatchewan)", "value": "-06:00" },
        { "label": "Bogota, Lima, Quito, Rio Branco (America/Bogota)", "value": "-05:00" },
        { "label": "Eastern Time (US & Canada) (US/Eastern)", "value": "-05:00" },
        { "label": "Indiana (East) (US/East-Indiana)", "value": "-05:00" },
        { "label": "Atlantic Time (Canada) (Canada/Atlantic)", "value": "-04:00" },
        { "label": "Caracas, La Paz (America/Caracas)", "value": "-04:00" },
        { "label": "Manaus (America/Manaus)", "value": "-04:00" },
        { "label": "Santiago (America/Santiago)", "value": "-04:00" },
        { "label": "Newfoundland (Canada/Newfoundland)", "value": "-03:30" },
        { "label": "Brasilia (America/Sao_Paulo)", "value": "-03:00" },
        { "label": "Buenos Aires, Georgetown (America/Argentina/Buenos_Aires)", "value": "-03:00" },
        { "label": "Greenland (America/Godthab)", "value": "-03:00" },
        { "label": "Montevideo (America/Montevideo)", "value": "-03:00" },
        { "label": "Mid-Atlantic (America/Noronha)", "value": "-02:00" },
        { "label": "Cape Verde Is. (Atlantic/Cape_Verde)", "value": "-01:00" },
        { "label": "Azores (Atlantic/Azores)", "value": "-01:00" },
        { "label": "Casablanca, Monrovia, Reykjavik (Africa/Casablanca)", "value": "+00:00" },
        { "label": "Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London (Etc/Greenwich)", "value": "+00:00" },
        { "label": "Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna (Europe/Amsterdam)", "value": "+01:00" },
        { "label": "Belgrade, Bratislava, Budapest, Ljubljana, Prague (Europe/Belgrade)", "value": "+01:00" },
        { "label": "Brussels, Copenhagen, Madrid, Paris (Europe/Brussels)", "value": "+01:00" },
        { "label": "Sarajevo, Skopje, Warsaw, Zagreb (Europe/Sarajevo)", "value": "+01:00" },
        { "label": "West Central Africa (Africa/Lagos)", "value": "+01:00" },
        { "label": "Amman (Asia/Amman)", "value": "+02:00" },
        { "label": "Athens, Bucharest, Istanbul (Europe/Athens)", "value": "+02:00" },
        { "label": "Beirut (Asia/Beirut)", "value": "+02:00" },
        { "label": "Cairo (Africa/Cairo)", "value": "+02:00" },
        { "label": "Harare, Pretoria (Africa/Harare)", "value": "+02:00" },
        { "label": "Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius (Europe/Helsinki)", "value": "+02:00" },
        { "label": "Jerusalem (Asia/Jerusalem)", "value": "+02:00" },
        { "label": "Minsk (Europe/Minsk)", "value": "+02:00" },
        { "label": "Windhoek (Africa/Windhoek)", "value": "+02:00" },
        { "label": "Kuwait, Riyadh, Baghdad (Asia/Kuwait)", "value": "+03:00" },
        { "label": "Moscow, St. Petersburg, Volgograd (Europe/Moscow)", "value": "+03:00" },
        { "label": "Nairobi (Africa/Nairobi)", "value": "+03:00" },
        { "label": "Tbilisi (Asia/Tbilisi)", "value": "+03:00" },
        { "label": "Tehran (Asia/Tehran)", "value": "+03:30" },
        { "label": "Abu Dhabi, Muscat (Asia/Muscat)", "value": "+04:00" },
        { "label": "Baku (Asia/Baku)", "value": "+04:00" },
        { "label": "Yerevan (Asia/Yerevan)", "value": "+04:00" },
        { "label": "Kabul (Asia/Kabul)", "value": "+04:30" },
        { "label": "Yekaterinburg (Asia/Yekaterinburg)", "value": "+05:00" },
        { "label": "Islamabad, Karachi, Tashkent (Asia/Karachi)", "value": "+05:00" },
        { "label": "Chennai, Kolkata, Mumbai, New Delhi (Asia/Calcutta)", "value": "+05:30" },
        { "label": "Sri Jayawardenapura (Asia/Calcutta)", "value": "+05:30" },
        { "label": "Kathmandu (Asia/Katmandu)", "value": "+05:45" },
        { "label": "Almaty, Novosibirsk (Asia/Almaty)", "value": "+06:00" },
        { "label": "Astana, Dhaka (Asia/Dhaka)", "value": "+06:00" },
        { "label": "Yangon (Rangoon) (Asia/Rangoon)", "value": "+06:30" },
        { "label": "Bangkok, Hanoi, Jakarta (Asia/Bangkok)", "value": "+07:00" },
        { "label": "Krasnoyarsk (Asia/Krasnoyarsk)", "value": "+07:00" },
        { "label": "Beijing, Chongqing, Hong Kong, Urumqi (Asia/Hong_Kong)", "value": "+08:00" },
        { "label": "Kuala Lumpur, Singapore (Asia/Kuala_Lumpur)", "value": "+08:00" },
        { "label": "Irkutsk, Ulaan Bataar (Asia/Irkutsk)", "value": "+08:00" },
        { "label": "Perth (Australia/Perth)", "value": "+08:00" },
        { "label": "Taipei (Asia/Taipei)", "value": "+08:00" },
        { "label": "Osaka, Sapporo, Tokyo (Asia/Tokyo)", "value": "+09:00" },
        { "label": "Seoul (Asia/Seoul)", "value": "+09:00" },
        { "label": "Yakutsk (Asia/Yakutsk)", "value": "+09:00" },
        { "label": "Adelaide (Australia/Adelaide)", "value": "+09:30" },
        { "label": "Darwin (Australia/Darwin)", "value": "+09:30" },
        { "label": "Brisbane (Australia/Brisbane)", "value": "+10:00" },
        { "label": "Canberra, Melbourne, Sydney (Australia/Canberra)", "value": "+10:00" },
        { "label": "Hobart (Australia/Hobart)", "value": "+10:00" },
        { "label": "Guam, Port Moresby (Pacific/Guam)", "value": "+10:00" },
        { "label": "Vladivostok (Asia/Vladivostok)", "value": "+10:00" },
        { "label": "Magadan, Solomon Is., New Caledonia (Asia/Magadan)", "value": "+11:00" },
        { "label": "Auckland, Wellington (Pacific/Auckland)", "value": "+12:00" },
        { "label": "Fiji, Kamchatka, Marshall Is. (Pacific/Fiji)", "value": "+12:00" },
        { "label": "Nuku'alofa (Pacific/Tongatapu)", "value": "+13:00" }
    ]

Just in case someone needs it handy!!!

score 0 · Answer 7 · answered Aug 01 '21 at 18:10

0

Many of these timezones have been deprecated by the IANA see

Invalid time zone specified: US/Alaska, US/Arizona, US/Mountain, US/Central etc error in Chrome but working in Mozilla

You'll notice that all of the "US/*" timezones are deprecated.

answered Aug 01 '21 at 18:10

chrishawn

478
1
4
12

score 0 · Answer 8 · answered Nov 25 '21 at 09:35

0

This npm package uses the data from the IANA TZ database: https://www.npmjs.com/package/tzdata

answered Nov 25 '21 at 09:35

ovidiu-miu

57
2
9

score 0 · Answer 9 · answered Mar 24 '22 at 08:49

0

maybe have a look at the ready to be used solution?

For example timezone-select-js

It is framework independent and has no dependencies.

answered Mar 24 '22 at 08:49

Oleg Abrazhaev

2,751
2
28
41

javascript get html timezone dropdown

9 Answers9