initial commit
This commit is contained in:
commit
2c4bab0f96
27
index.html
Normal file
27
index.html
Normal file
@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>timestamp tool</title>
|
||||
</head>
|
||||
<body>
|
||||
<input type="datetime-local" id="timestamp" name="timestamp">
|
||||
<select name="timezone">
|
||||
</select>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>syntax</th>
|
||||
<th>result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script async src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
221
script.js
Normal file
221
script.js
Normal file
@ -0,0 +1,221 @@
|
||||
'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:"<t:%s:d>", format:(ts) => { return ts.toLocaleDateString(locale) }},
|
||||
{syntax:"<t:%s:D>", format:(ts) => { return ts.toLocaleDateString(locale, {dateStyle: "long"}) }},
|
||||
{syntax:"<t:%s:t>", format:(ts) => { return ts.toLocaleTimeString(locale, {timeStyle: "short"}); }},
|
||||
{syntax:"<t:%s:T>", format:(ts) => { return ts.toLocaleTimeString(locale); }},
|
||||
{syntax:"<t:%s:f>", format:(ts) => { return ts.toLocaleString(locale, {dateStyle: "long", timeStyle: "short"}) }},
|
||||
{syntax:"<t:%s:F>", format:(ts) => { return ts.toLocaleString(locale, {dateStyle: "full", timeStyle: "short"}) }},
|
||||
{syntax:"<t:%s:R>", 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
|
||||
Loading…
Reference in New Issue
Block a user