'use strict' const browsertz = Intl.DateTimeFormat().resolvedOptions().timeZone; var tzs = [ {"label":"(GMT-12:00) International Date Line West", "str":"Etc/GMT+12", "value":"-12"}, {"label":"(GMT-11:00) Midway Island, Samoa","str":"Pacific/Midway","value":"-11"}, {"label":"(GMT-10:00) Hawaii","str":"Pacific/Honolulu","value":"-10"}, {"label":"(GMT-09:00) Alaska","str":"US/Alaska","value":"-9"}, {"label":"(GMT-08:00) Pacific Time (US & Canada)","str":"America/Los_Angeles","value":"-8"}, {"label":"(GMT-08:00) Tijuana, Baja California","str":"America/Tijuana","value":"-8"}, {"label":"(GMT-07:00) Arizona","str":"US/Arizona","value":"-7"}, {"label":"(GMT-07:00) Chihuahua, La Paz, Mazatlan","str":"America/Chihuahua","value":"-7"}, {"label":"(GMT-07:00) Mountain Time (US & Canada)","str":"US/Mountain","value":"-7"}, {"label":"(GMT-06:00) Central America","str":"America/Managua","value":"-6"}, {"label":"(GMT-06:00) Central Time (US & Canada)","str":"US/Central","value":"-6"}, {"label":"(GMT-06:00) Guadalajara, Mexico City, Monterrey","value":"America/Mexico_City","value":"-6"}, {"label":"(GMT-05:00) Bogota, Lima, Quito, Rio Branco","str":"America/Bogota","value":"-5"}, {"label":"(GMT-05:00) Eastern Time (US & Canada)","str":"US/Eastern","value":"-5"}, {"label":"(GMT-05:00) Indiana (East)","str":"US/East-Indiana","value":"-5"}, {"label":"(GMT-04:00) Atlantic Time (Canada)","str":"Canada/Atlantic","value":"-4"}, {"label":"(GMT-04:00) Caracas, La Paz","str":"America/Caracas","value":"-4"}, {"label":"(GMT-04:00) Manaus","str":"America/Manaus", "value":"-4"}, {"label":"(GMT-04:00) Santiago","str":"America/Santiago","value":"-4"}, {"label":"(GMT-03:30) Newfoundland","str":"Canada/Newfoundland","value":"-3.5"}, {"label":"(GMT-03:00) Brasilia","str":"America/Sao_Paulo","value":"-3"}, {"label":"(GMT-03:00) Buenos Aires, Georgetown","str":"America/Argentina/Buenos_Aires","value":"-3"}, {"label":"(GMT-03:00) Greenland","str":"America/Godthab","value":"-3"}, {"label":"(GMT-03:00) Montevideo","str":"America/Montevideo","value":"-3"}, {"label":"(GMT-02:00) Mid-Atlantic","str":"America/Noronha","value":"-2"}, {"label":"(GMT-01:00) Cape Verde Is.","str":"Atlantic/Cape_Verde","value":"-1"}, {"label":"(GMT-01:00) Azores","str":"Atlantic/Azores","value":"-1"}, {"label":"(GMT+00:00) Casablanca, Monrovia, Reykjavik","str":"Africa/Casablanca","value":"0"}, {"label":"(GMT+00:00) Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London","str":"Etc/Greenwich","value":"0"}, {"label":"(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna","str":"Europe/Amsterdam","value":"1"}, {"label":"(GMT+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague","str":"Europe/Belgrade","value":"1"}, {"label":"(GMT+01:00) Brussels, Copenhagen, Madrid, Paris","str":"Europe/Brussels","value":"1"}, {"label":"(GMT+01:00) Sarajevo, Skopje, Warsaw, Zagreb","str":"Europe/Sarajevo","value":"1"}, {"label":"(GMT+01:00) West Central Africa","str":"Africa/Lagos","value":"1"}, {"label":"(GMT+02:00) Amman","str":"Asia/Amman","value":"2"}, {"label":"(GMT+02:00) Athens, Bucharest, Istanbul","str":"Europe/Athens","value":"2"}, {"label":"(GMT+02:00) Beirut","str":"Asia/Beirut","value":"2"}, {"label":"(GMT+02:00) Cairo","str":"Africa/Cairo","value":"2"}, {"label":"(GMT+02:00) Harare, Pretoria","str":"Africa/Harare","value":"2"}, {"label":"(GMT+02:00) Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius","str":"Europe/Helsinki","value":"2"}, {"label":"(GMT+02:00) Jerusalem","str":"Asia/Jerusalem","value":"2"}, {"label":"(GMT+02:00) Minsk","str":"Europe/Minsk","value":"2"}, {"label":"(GMT+02:00) Windhoek","str":"Africa/Windhoek","value":"2"}, {"label":"(GMT+03:00) Kuwait, Riyadh, Baghdad","str":"Asia/Kuwait","value":"3"}, {"label":"(GMT+03:00) Moscow, St. Petersburg, Volgograd","str":"Europe/Moscow","value":"3"}, {"label":"(GMT+03:00) Nairobi","str":"Africa/Nairobi","value":"3"}, {"label":"(GMT+03:00) Tbilisi","str":"Asia/Tbilisi","value":"3"}, {"label":"(GMT+03:30) Tehran","str":"Asia/Tehran","value":"3.5"}, {"label":"(GMT+04:00) Abu Dhabi, Muscat","str":"Asia/Muscat","value":"4"}, {"label":"(GMT+04:00) Baku","str":"Asia/Baku","value":"4"}, {"label":"(GMT+04:00) Yerevan","str":"Asia/Yerevan","value":"4"}, {"label":"(GMT+04:30) Kabul","str":"Asia/Kabul","value":"4.5"}, {"label":"(GMT+05:00) Yekaterinburg","str":"Asia/Yekaterinburg","value":"5"}, {"label":"(GMT+05:00) Islamabad, Karachi, Tashkent","str":"Asia/Karachi","value":"5"}, {"label":"(GMT+05:30) Sri Jayawardenapura","str":"Asia/Calcutta","value":"5.5"}, {"label":"(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi","value":"5.5"}, {"label":"(GMT+05:45) Kathmandu","str":"Asia/Katmandu","value":"5.75"}, {"label":"(GMT+06:00) Almaty, Novosibirsk","str":"Asia/Almaty","value":"6"}, {"label":"(GMT+06:00) Astana, Dhaka","str":"Asia/Dhaka","value":"6"}, {"label":"(GMT+06:30) Yangon (Rangoon)","str":"Asia/Rangoon","value":"6.5"}, {"label":"(GMT+07:00) Bangkok, Hanoi, Jakarta","str":"Asia/Bangkok","value":"7"}, {"label":"(GMT+07:00) Krasnoyarsk","str":"Asia/Krasnoyarsk","value":"7"}, {"label":"(GMT+08:00) Beijing, Chongqing, Hong Kong, Urumqi","str":"Asia/Hong_Kong","value":"8"}, {"label":"(GMT+08:00) Kuala Lumpur, Singapore","str":"Asia/Kuala_Lumpur","value":"8"}, {"label":"(GMT+08:00) Irkutsk, Ulaan Bataar","str":"Asia/Irkutsk","value":"8"}, {"label":"(GMT+08:00) Perth","str":"Australia/Perth","value":"8"}, {"label":"(GMT+08:00) Taipei","str":"Asia/Taipei","value":"8"}, {"label":"(GMT+09:00) Osaka, Sapporo, Tokyo","str":"Asia/Tokyo","value":"9"}, {"label":"(GMT+09:00) Seoul","str":"Asia/Seoul","value":"9"}, {"label":"(GMT+09:00) Yakutsk","str":"Asia/Yakutsk","value":"9"}, {"label":"(GMT+09:30) Adelaide","str":"Australia/Adelaide","value":"9.5"}, {"label":"(GMT+09:30) Darwin","str":"Australia/Darwin","value":"9.5"}, {"label":"(GMT+10:00) Brisbane","str":"Australia/Brisbane","value":"10"}, {"label":"(GMT+10:00) Canberra, Melbourne, Sydney","str":"Australia/Canberra","value":"10"}, {"label":"(GMT+10:00) Hobart","str":"Australia/Hobart","value":"10"}, {"label":"(GMT+10:00) Guam, Port Moresby","str":"Pacific/Guam","value":"10"}, {"label":"(GMT+10:00) Vladivostok","str":"Asia/Vladivostok","value":"10"}, {"label":"(GMT+11:00) Magadan, Solomon Is., New Caledonia","str":"Asia/Magadan","value":"11"}, {"label":"(GMT+12:00) Auckland, Wellington","str":"Pacific/Auckland","value":"12"}, {"label":"(GMT+12:00) Fiji, Kamchatka, Marshall Is.","str":"Pacific/Fiji","value":"12"}, {"label":"(GMT+13:00) Nuku'alofa","str":"Pacific/Tongatapu","value":"13"} ] let newts = ""; let newtz = ""; let newdt = ""; let select = document.querySelector("select"); let timestamp = document.querySelector("#timestamp"); let tbody = document.querySelector("tbody"); const locale = "en-US" let options = [] function timezoneSelect(){ let frag = document.createDocumentFragment() tzs.forEach(tz => { let option = document.createElement("option"); if(browsertz == tz.str){ newtz = tz.str option.setAttribute("selected", "selected") } option.value = tz.str option.appendChild(document.createTextNode(tz.label)) frag.appendChild(option) }) return frag; } function toLocalISOString(date) { const localDate = new Date(date - date.getTimezoneOffset() * 60000); localDate.setSeconds(null); localDate.setMilliseconds(null); newdt = localDate.toISOString().slice(0, -1); return localDate.toISOString().slice(0, -1); } function toUTCDate(d){ return new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate(), d.getUTCHours(), d.getUTCMinutes(), d.getUTCSeconds(), d.getUTCMilliseconds())); } function changeTimezone(date, tz){ var invdate = new Date(date.toLocaleString(locale, { timeZone: tz })); var diff = date.getTime() - invdate.getTime(); return new Date(date.getTime() - diff); } function setNewts() { // change assigned time to selected timezone & return timestamp newtz = select.value //newdt = Math.floor(new Date(timestamp.value).getTime()/1000.0) //newts = changeTimezone(new Date(newdt), newtz).getTime() newdt = new Date(timestamp.value) newts = Math.floor(changeTimezone(new Date(newdt), newtz).getTime()/1000.0) buildTable() } const opts = [ {syntax:"", format:(ts) => { return ts.toLocaleDateString(locale) }}, {syntax:"", format:(ts) => { return ts.toLocaleDateString(locale, {dateStyle: "long"}) }}, {syntax:"", format:(ts) => { return ts.toLocaleTimeString(locale, {timeStyle: "short"}); }}, {syntax:"", format:(ts) => { return ts.toLocaleTimeString(locale); }}, {syntax:"", format:(ts) => { return ts.toLocaleString(locale, {dateStyle: "long", timeStyle: "short"}) }}, {syntax:"", format:(ts) => { return ts.toLocaleString(locale, {dateStyle: "full", timeStyle: "short"}) }}, {syntax:"", format:(ts) => { let now = new Date() let timeleft = ts - now.getTime(); const msPerSecond = 1000; const msPerMinute = msPerSecond * 60; const msPerHour = msPerMinute * 60; const msPerDay = msPerHour * 24; const days = Math.floor(timeleft / msPerDay); const hours = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / msPerHour); const minutes = Math.floor((timeleft % (1000 * 60 * 60)) / msPerMinute); const seconds = Math.floor((timeleft % (1000 * 60)) / msPerSecond); // todo: // negatives if(days <= 30){ if (days == 0){ if(hours == 0){ return `in ${minutes} minutes` } return `in ${hours} hours` } return `in ${days} days` }else if(days >= 365){ if (days > 730){ return `in ${Math.floor(days / 365)} years` } return `in a year` }else{ let months = Math.floor(days / 30) return `in ${months} months` } console.log(days + ' days ' + hours + ' hours ' + minutes + ' minutes ' + seconds + ' seconds left'); return "time until timestamp" }} ] function buildTable() { let frag = document.createDocumentFragment() opts.forEach(opt => { let tr = document.createElement("tr") let stxtd = document.createElement("td") stxtd.appendChild(document.createTextNode(opt.syntax.replace("%s", newts))) let restd = document.createElement("td") restd.appendChild(document.createTextNode(opt.format(newdt))) tr.appendChild(stxtd) tr.appendChild(restd) frag.appendChild(tr); }) tbody.innerHTML = "" tbody.appendChild(frag) } select.addEventListener('change', setNewts) timestamp.addEventListener('change', setNewts) select.appendChild(timezoneSelect()) timestamp.value = toLocalISOString(new Date()); setNewts() buildTable() // 7