How to Create JavaScript Date Change Timezone
First of all, load the following assets into the head tag of your HTML document.
<link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet">
Create the HTML structure for the data change timezone as follow:
<div id="app">
<p>Live Consert UTC : {{ utcDate }}</p>
<p class="red" v-if="timeZoneActive !== ''">Live Consert Zone Time : {{ activeCourtyDateTime }}</p>
<select v-model="timeZoneActive" @change="updateTimeZone(utcDate, timeZoneActive)">
<option value="">Select your Time Zone</option>
<option v-for="timeZone in timeZones" :value="timeZone">{{ timeZone }}</option>
</select>
</div>
Now, style the date changer using the following CSS styles:
#app {
width: 100%;
max-width: 600px;
background: #ccc;
border-radius: 10px;
margin: 50px auto;
font-family: "Gugi", cursive;
text-align: center;
padding: 20px 20px 50px;
font-size: 20px;
box-shadow: 0 0 8px 10px #eee;
}
#app select {
padding: 0 20px;
border: 0 none;
border-radius: 10px;
font-size: 20px;
font-family: "Gugi", cursive;
height: 60px;
line-hieght: 60px;
}
#app .red {
color: red;
}
Load the following scripts before closing the body tag:
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js'></script>
Finally, add the following JavaScript function for its effect:
const vue = new Vue({
el: "#app",
data: {
timeZones: [
"Europe/London",
"Europe/Dublin",
"Europe/Warsaw",
"Asia/Kolkata",
"Australia/Lord_Howe",
"Antarctica/Macquarie",
"Australia/Hobart",
"Australia/Currie",
"Australia/Melbourne",
"Australia/Sydney",
"Australia/Broken_Hill",
"Australia/Brisbane",
"Australia/Lindeman",
"Australia/Adelaide",
"Australia/Darwin",
"Australia/Perth",
"Australia/Eucla",
"America/Argentina/Buenos_Aires",
"America/Argentina/Cordoba",
"America/Argentina/Salta",
"America/Argentina/Jujuy",
"America/Argentina/Tucuman",
"America/Argentina/Catamarca",
"America/Argentina/La_Rioja",
"America/Argentina/San_Juan",
"America/Argentina/Mendoza",
"America/Argentina/San_Luis",
"America/Argentina/Rio_Gallegos",
"America/Argentina/Ushuaia",
"America/Barbados",
"America/La_Paz",
"America/Noronha",
"America/Belem",
"America/Fortaleza",
"America/Recife",
"America/Araguaina",
"America/Maceio",
"America/Bahia",
"America/Sao_Paulo",
"America/Campo_Grande",
"America/Cuiaba",
"America/Santarem",
"America/Porto_Velho",
"America/Boa_Vista",
"America/Manaus",
"America/Eirunepe",
"America/Rio_Branco",
"America/Nassau",
"America/Belize",
"America/St_Johns",
"America/Halifax",
"America/Glace_Bay",
"America/Moncton",
"America/Goose_Bay",
"America/Blanc-Sablon",
"America/Toronto",
"America/Nipigon",
"America/Thunder_Bay",
"America/Iqaluit",
"America/Pangnirtung",
"America/Atikokan",
"America/Winnipeg",
"America/Rainy_River",
"America/Resolute",
"America/Rankin_Inlet",
"America/Regina",
"America/Swift_Current",
"America/Edmonton",
"America/Cambridge_Bay",
"America/Yellowknife",
"America/Inuvik",
"America/Creston",
"America/Dawson_Creek",
"America/Fort_Nelson",
"America/Vancouver",
"America/Whitehorse",
"America/Dawson",
"America/Santiago",
"America/Punta_Arenas",
"America/Bogota",
"America/Costa_Rica",
"America/Havana",
"America/Curacao",
"America/Santo_Domingo",
"America/Guayaquil",
"America/Cayenne",
"America/Godthab",
"America/Danmarkshavn",
"America/Scoresbysund",
"America/Thule",
"America/Guatemala",
"America/Guyana",
"America/Tegucigalpa",
"America/Port-au-Prince",
"America/Jamaica",
"America/Martinique",
"America/Mexico_City",
"America/Cancun",
"America/Merida",
"America/Monterrey",
"America/Matamoros",
"America/Mazatlan",
"America/Chihuahua",
"America/Ojinaga",
"America/Hermosillo",
"America/Tijuana",
"America/Bahia_Banderas",
"America/Managua",
"America/Panama",
"America/Lima",
"America/Miquelon",
"America/Puerto_Rico",
"America/Asuncion",
"America/Paramaribo",
"America/El_Salvador",
"America/Grand_Turk",
"America/Port_of_Spain",
"America/New_York",
"America/Detroit",
"America/Kentucky/Louisville",
"America/Kentucky/Monticello",
"America/Indiana/Indianapolis",
"America/Indiana/Vincennes",
"America/Indiana/Winamac",
"America/Indiana/Marengo",
"America/Indiana/Petersburg",
"America/Indiana/Vevay",
"America/Chicago",
"America/Indiana/Tell_City",
"America/Indiana/Knox",
"America/Menominee",
"America/North_Dakota/Center",
"America/North_Dakota/New_Salem",
"America/North_Dakota/Beulah",
"America/Denver",
"America/Boise",
"America/Phoenix",
"America/Los_Angeles",
"America/Anchorage",
"America/Juneau",
"America/Sitka",
"America/Metlakatla",
"America/Yakutat",
"America/Nome",
"America/Adak",
"America/Montevideo",
"America/Caracas",
"Asia/Dubai",
"Asia/Kabul",
"Asia/Yerevan",
"Asia/Baku",
"Asia/Dhaka",
"Asia/Brunei",
"Asia/Thimphu",
"Asia/Shanghai",
"Asia/Urumqi",
"Asia/Nicosia",
"Asia/Famagusta",
"Asia/Tbilisi",
"Asia/Hong_Kong",
"Asia/Jakarta",
"Asia/Pontianak",
"Asia/Makassar",
"Asia/Jayapura",
"Asia/Jerusalem",
"Asia/Baghdad",
"Asia/Tehran",
"Asia/Amman",
"Asia/Tokyo",
"Asia/Bishkek",
"Asia/Pyongyang",
"Asia/Seoul",
"Asia/Almaty",
"Asia/Qyzylorda",
"Asia/Aqtobe",
"Asia/Aqtau",
"Asia/Atyrau",
"Asia/Oral",
"Asia/Beirut",
"Asia/Colombo",
"Asia/Yangon",
"Asia/Ulaanbaatar",
"Asia/Hovd",
"Asia/Choibalsan",
"Asia/Macau",
"Asia/Kuala_Lumpur",
"Asia/Kuching",
"Asia/Kathmandu",
"Asia/Manila",
"Asia/Karachi",
"Asia/Gaza",
"Asia/Hebron",
"Asia/Qatar",
"Asia/Yekaterinburg",
"Asia/Omsk",
"Asia/Novosibirsk",
"Asia/Barnaul",
"Asia/Tomsk",
"Asia/Novokuznetsk",
"Asia/Krasnoyarsk",
"Asia/Irkutsk",
"Asia/Chita",
"Asia/Yakutsk",
"Asia/Khandyga",
"Asia/Vladivostok",
"Asia/Ust-Nera",
"Asia/Magadan",
"Asia/Sakhalin",
"Asia/Srednekolymsk",
"Asia/Kamchatka",
"Asia/Anadyr",
"Asia/Riyadh",
"Asia/Singapore",
"Asia/Damascus",
"Asia/Bangkok",
"Asia/Dushanbe",
"Asia/Dili",
"Asia/Ashgabat",
"Asia/Taipei",
"Asia/Samarkand",
"Asia/Tashkent",
"Asia/Ho_Chi_Minh",
"Europe/Andorra",
"Europe/Tirane",
"Europe/Vienna",
"Europe/Brussels",
"Europe/Sofia",
"Europe/Minsk",
"Europe/Zurich",
"Europe/Prague",
"Europe/Berlin",
"Europe/Copenhagen",
"Europe/Tallinn",
"Europe/Madrid",
"Europe/Helsinki",
"Europe/Paris",
"Europe/Gibraltar",
"Europe/Athens",
"Europe/Budapest",
"Europe/Rome",
"Europe/Vilnius",
"Europe/Luxembourg",
"Europe/Riga",
"Europe/Monaco",
"Europe/Chisinau",
"Europe/Malta",
"Europe/Amsterdam",
"Europe/Oslo",
"Europe/Lisbon",
"Europe/Bucharest",
"Europe/Belgrade",
"Europe/Kaliningrad",
"Europe/Moscow",
"Europe/Simferopol",
"Europe/Kirov",
"Europe/Astrakhan",
"Europe/Volgograd",
"Europe/Saratov",
"Europe/Ulyanovsk",
"Europe/Samara",
"Europe/Stockholm",
"Europe/Istanbul",
"Europe/Kiev",
"Europe/Uzhgorod",
"Europe/Zaporozhye",
"Antarctica/Casey",
"Antarctica/Davis",
"Antarctica/Mawson",
"Antarctica/Palmer",
"Antarctica/Rothera",
"Antarctica/Syowa",
"Antarctica/Troll",
"Antarctica/Vostok",
"Atlantic/Bermuda",
"Atlantic/Cape_Verde",
"Atlantic/Canary",
"Atlantic/Stanley",
"Atlantic/Faroe",
"Atlantic/South_Georgia",
"Atlantic/Reykjavik",
"Atlantic/Madeira",
"Atlantic/Azores",
"Africa/Abidjan",
"Africa/Algiers",
"Africa/Cairo",
"Africa/El_Aaiun",
"Africa/Ceuta",
"Africa/Accra",
"Africa/Bissau",
"Africa/Nairobi",
"Africa/Monrovia",
"Africa/Tripoli",
"Africa/Casablanca",
"Africa/Maputo",
"Africa/Windhoek",
"Africa/Lagos",
"Africa/Khartoum",
"Africa/Juba",
"Africa/Sao_Tome",
"Africa/Ndjamena",
"Africa/Tunis",
"Africa/Johannesburg",
"Indian/Cocos",
"Indian/Christmas",
"Indian/Chagos",
"Indian/Mauritius",
"Indian/Maldives",
"Indian/Reunion",
"Indian/Mahe",
"Indian/Kerguelen",
"Pacific/Pago_Pago",
"Pacific/Rarotonga",
"Pacific/Easter",
"Pacific/Galapagos",
"Pacific/Fiji",
"Pacific/Chuuk",
"Pacific/Pohnpei",
"Pacific/Kosrae",
"Pacific/Guam",
"Pacific/Tarawa",
"Pacific/Enderbury",
"Pacific/Kiritimati",
"Pacific/Majuro",
"Pacific/Kwajalein",
"Pacific/Noumea",
"Pacific/Norfolk",
"Pacific/Nauru",
"Pacific/Niue",
"Pacific/Auckland",
"Pacific/Chatham",
"Pacific/Tahiti",
"Pacific/Marquesas",
"Pacific/Gambier",
"Pacific/Port_Moresby",
"Pacific/Bougainville",
"Pacific/Pitcairn",
"Pacific/Palau",
"Pacific/Guadalcanal",
"Pacific/Fakaofo",
"Pacific/Tongatapu",
"Pacific/Funafuti",
"Pacific/Wake",
"Pacific/Honolulu",
"Pacific/Efate",
"Pacific/Wallis",
"Pacific/Apia"
],
utcDate: "",
timeZoneActive: "",
activeCourtyDateTime: ""
},
methods: {
updateTimeZone(drawdate, timeZone) {
if (timeZone !== "") {
let newdate = new Date(drawdate);
newdate = new Date(
Date.UTC(
newdate.getFullYear(),
newdate.getMonth(),
newdate.getDate(),
newdate.getHours(),
newdate.getMinutes(),
newdate.getSeconds(),
newdate.getMilliseconds()
)
).toISOString();
this.activeCourtyDateTime = this.formateDate(
new Date(
new Date(newdate).toLocaleString("en-US", { timeZone: timeZone })
)
);
} else {
this.activeCourtyDateTime = "";
}
},
formateDate(newDate) {
return String(newDate).split(" GMT")[0];
}
},
mounted() {
const newDate = new Date();
this.utcDate = this.formateDate(
new Date(
newDate.getFullYear(),
newDate.getMonth(),
newDate.getDate() + 1,
0,
0,
0,
0
)
);
}
});
That’s all! hopefully, you have successfully created JavaScript date change timezone. If you have any questions or suggestions, feel free to comment below.
