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
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;
}
{"label":"(GMT+02:00) Cairo","value":"Africa/Cairo"} and {"label":"(GMT+02:00) Cairo","value":"2"}
tzInts solution is that your timezones will be wrong half the year because of daylight savings time.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>
{"label":"(GMT+02:00) Cairo","value":"Africa/Cairo"} and {"label":"(GMT+02:00) Cairo","value":"2"}
US/Eastern, not UTC-4 (or 5), for example.You can use moment-timezone:
moment.tz.names()moment.tz.zone(name)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 & Canada)</option>
<option value="-8">(UTC-08:00) Pacific Time (US & 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 & Canada)</option>
<option value="-6">(UTC-06:00) Central America</option>
<option value="-5">(UTC-06:00) Central Time (US & 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 & 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>
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 can get the list of the supported timezones like this:
// The IANA names of the zones (e.g. `America/New_York`)
const timeZones = Intl.supportedValuesOf('timeZone');
And then you can map over this array to create a descriptor to be used in the dropdown. You can even create a localized list without any extra efforts, if you use luxon.
import { DateTime } from 'luxon';
const locale = 'en-US';
const date = DateTime.utc().setLocale(locale);
const zoneDescriptors = timeZones.map(timeZone => {
const zonedDate = date.setZone(timeZone);
const { offset, offsetNameShort, offsetNameLong, zoneName } = zonedDate;
return {
offset, // Offset in minutes
isoOffset: zonedDate.toFormat('ZZ'), // Offset in string format, e.g. +01:00
offsetNameShort, // Short name for the offset, e.g. GMT+1
offsetNameLong, // The localized long name of the offset (e.g. `Central European Time`, `Mitteleuropäische Normalzeit` or `中央ヨーロッパ標準時`)
zoneName,
};
})
// Sort based on the offset minutes
.sort((a, b) => (a.offset > b.offset ? 1 : -1));
// Result:
// [
// {
// offset: -660,
// isoOffset: '-11:00',
// offsetNameShort: 'GMT-11',
// offsetNameLong: 'Samoa Standard Time',
// zoneName: 'Pacific/Pago_Pago',
// },
// {
// offset: -660,
// isoOffset: '-11:00',
// offsetNameShort: 'GMT-11',
// offsetNameLong: 'Niue Time',
// zoneName: 'Pacific/Niue',
// },
// ...
// ];
This array still contains 418 items, but you can create an aggregated list based on your needs, e.g. like this:
const aggregated = zoneDescriptors.reduce((acc, descriptor) => {
const { isoOffset, offsetNameShort, offsetNameLong, zoneName } = descriptor;
if (acc.findIndex(item => item.isoOffset === isoOffset) === -1) {
acc.push({
isoOffset,
aliases: [],
});
}
acc[acc.findIndex(item => item.isoOffset === isoOffset)].aliases.push({
zoneName,
offsetNameShort,
offsetNameLong,
});
return acc;
}, []);
// Result:
// [
// {
// isoOffset: '-11:00',
// aliases: [
// {
// zoneName: 'Pacific/Pago_Pago',
// offsetNameShort: 'GMT-11',
// offsetNameLong: 'Samoa Standard Time',
// },
// {
// zoneName: 'Pacific/Niue',
// offsetNameShort: 'GMT-11',
// offsetNameLong: 'Niue Time',
// },
// {
// zoneName: 'Pacific/Midway',
// offsetNameShort: 'GMT-11',
// offsetNameLong: 'Samoa Standard Time',
// },
// ],
// },
// ...
// ];
And create a final option list like this:
const dedupe = (item, index, arr) => arr.indexOf(item) === index;
const options = aggregatedZoneDescriptors.map(zone => ({
value: zone.isoOffset,
label: `${zone.isoOffset} (${zone.aliases
.map(alias => alias.offsetNameLong)
.filter(dedupe)
.join(', ')})`,
}));
// Result:
// [
// {
// value: '-11:00',
// label: '-11:00 (Samoa Standard Time, Niue Time)',
// },
// {
// value: '-10:00',
// label:
// '-10:00 (Tahiti Time, Cook Islands Standard Time, Hawaii-Aleutian Standard Time)',
// },
// ...
// ];
Many of these timezones have been deprecated by the IANA see
You'll notice that all of the "US/*" timezones are deprecated.
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!!!
This npm package uses the data from the IANA TZ database: https://www.npmjs.com/package/tzdata
maybe have a look at the ready to be used solution?
For example timezone-select-js
It is framework independent and has no dependencies.
