Sometimes, we want to create a HTML time zone dropdown with JavaScript.
In this article, we’ll look at how to create a HTML time zone dropdown with JavaScript.
How to create a HTML time zone dropdown with JavaScript?
To create a HTML time zone dropdown with JavaScript, we can create the options from a time zone array and then append them to a select element as its child.
For instance, we write:
<select>
</select>
to add a select element.
Then we write:
const select = document.querySelector('select')
const tzArr = [{
"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"
}
]
for (const {
label,
value
} of tzArr) {
const o = new Option()
o.value = value
o.textContent = label
select.appendChild(o)
}
to add the options to the select drop down.
We select the select element with querySelector.
Then we loop through tzArr with a for-of loop.
In the loop body, we create a new option element with Option.
Then we set the value and textContent to the value and label respectively.
And then we call selectAppendChild with o to append o as the child of the select element.
Conclusion
To create a HTML time zone dropdown with JavaScript, we can create the options from a time zone array and then append them to a select element as its child.