mirror of https://github.com/therootcompany/tz.js
277 lines
7.4 KiB
HTML
277 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="no-js">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
|
|
<title>Convert TimeZones in Your Browser</title>
|
|
|
|
<link rel="canonical" href="https://therootcompany.github.io/tz.js/" />
|
|
|
|
<meta name="theme-color" content="#FF00FF" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spcss@0.7.0" />
|
|
|
|
<style>
|
|
input {
|
|
width: 24em;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Content -->
|
|
<h1>
|
|
<a href="https://github.com/therootcompany/tz.js" target="_blank"
|
|
>XTZ.js</a
|
|
>
|
|
</h1>
|
|
|
|
<h3>
|
|
Current Time:
|
|
<br />
|
|
<span class="js-my-dt">YYYY-MM-DDThh:mm:ss.mmm+0000</span>
|
|
</h3>
|
|
<pre><code>new Intl.DateTimeFormat().resolvedOptions().timeZone;</code></pre>
|
|
Current Time Zone: <span class="js-my-tz">America/XXXX</span>
|
|
<br />
|
|
<pre><code>String(((new Date()).getTimezoneOffset() / 60)).padStart(2, '0') +
|
|
String(((new Date()).getTimezoneOffset() % 60)).padStart(2, '0')</code></pre>
|
|
Current Time Offset: <span class="js-my-offset">-0000</span>
|
|
<hr />
|
|
|
|
<form class="js-tz2tz">
|
|
<h3>Convert Between Time Zones:</h3>
|
|
<label>
|
|
Time:
|
|
<input
|
|
class="js-dt-xtz"
|
|
type="text"
|
|
placeholder="ex: 2021-03-14 03:15:69.000"
|
|
required
|
|
/>
|
|
</label>
|
|
<br />
|
|
|
|
<label>
|
|
Input Zone:
|
|
<input
|
|
class="js-tz1-xtz"
|
|
type="text"
|
|
placeholder="ex: UTC or America/New_York"
|
|
required
|
|
/>
|
|
</label>
|
|
<br />
|
|
|
|
<label>
|
|
Output Zone:
|
|
<input
|
|
class="js-tz2-xtz"
|
|
type="text"
|
|
placeholder="ex: America/Los_Angeles or UTC"
|
|
required
|
|
/>
|
|
</label>
|
|
<br />
|
|
|
|
<label>
|
|
ISO:
|
|
<input class="js-my-dt-xtz" type="text" disabled />
|
|
</label>
|
|
<br />
|
|
<br />
|
|
<button type="submit">Convert between Zones!</button>
|
|
<br />
|
|
</form>
|
|
|
|
<hr />
|
|
|
|
<form class="js-local">
|
|
<h3>Local ISO+Offset String:</h3>
|
|
<pre><code>XTZ.toLocalISOString(new Date())</code></pre>
|
|
<label>
|
|
ISO:
|
|
<input class="js-my-dt-local" type="text" disabled />
|
|
</label>
|
|
<br />
|
|
</form>
|
|
|
|
<hr />
|
|
|
|
<form class="js-tz2utc">
|
|
<h3>TimeZone-Relative (Local) to Absolute (ISO+Offset) String:</h3>
|
|
<pre><code>XTZ.fromTimeZone("<span class="js-dtx-tz">YYYY-03-14 03:15:69.000</span>", "<span class="js-tzx-tz">UTC</span>")
|
|
.toISOString()
|
|
// <span class="js-myx-dt-tz"></span></code></pre>
|
|
<label>
|
|
Time:
|
|
<input
|
|
class="js-dt-tz"
|
|
type="text"
|
|
placeholder="ex: 2021-03-14 03:15:69.000"
|
|
required
|
|
/>
|
|
</label>
|
|
<br />
|
|
|
|
<label>
|
|
Input Zone:
|
|
<input
|
|
class="js-tz-tz"
|
|
type="text"
|
|
placeholder="ex: America/New_York"
|
|
required
|
|
/>
|
|
</label>
|
|
<br />
|
|
<label>
|
|
ISO:
|
|
<input class="js-my-dt-tz" type="text" disabled />
|
|
</label>
|
|
<br />
|
|
<br />
|
|
<button type="submit">Convert to ISO+Offset!</button>
|
|
<br />
|
|
</form>
|
|
|
|
<hr />
|
|
|
|
<form class="js-utc2tz">
|
|
<h3>Absolute (UTC) to TimeZone-Relative (ISO+Offset) String:</h3>
|
|
<pre><code>XTZ.toTimeZone("<span class="js-dtx-utc">YYYY-03-14 03:15:69.000</span>", "<span class="js-tzx-utc">UTC</span>")
|
|
.toISOString()
|
|
// <span class="js-myx-dt-utc"></span></code></pre>
|
|
<label>
|
|
Time:
|
|
<input
|
|
class="js-dt-utc"
|
|
type="text"
|
|
placeholder="ex: 2021-03-14 03:15:69.000"
|
|
required
|
|
/>
|
|
</label>
|
|
<br />
|
|
<label>
|
|
Output Zone:
|
|
<input
|
|
class="js-tz-utc"
|
|
type="text"
|
|
placeholder="ex: America/New_York"
|
|
required
|
|
/>
|
|
</label>
|
|
<br />
|
|
<label>
|
|
ISO:
|
|
<input class="js-my-dt-utc" type="text" disabled />
|
|
</label>
|
|
<br />
|
|
<br />
|
|
<button type="submit">Convert to TZ!</button>
|
|
<br />
|
|
</form>
|
|
|
|
<hr />
|
|
<h3>Time Zones List</h3>
|
|
See the
|
|
<a href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones"
|
|
>Full List of Time Zones</a
|
|
>
|
|
on Wikipedia.
|
|
<pre>
|
|
America/New_York -0500 -0400 (Eastern Time)
|
|
America/Denver -0700 -0600 (Mountain Time)
|
|
America/Phoenix -0700 (No DST) (Arizona Time)
|
|
America/Los_Angeles -0800 -0700 (Pacific Time)
|
|
UTC Z (UTC "Zulu" Time)
|
|
Australia/Adelaide +0930 +1030 (30-min)
|
|
Asia/Kathmandu +0545 (No DST) (45-min)
|
|
Asia/Kolkata +0530 (No DST) (30-min)</pre
|
|
>
|
|
<hr />
|
|
Code at
|
|
<a href="https://github.com/therootcompany/tz.js" target="_blank"
|
|
>github.com/therootcompany/tz.js</a
|
|
>
|
|
<script src="./xtz.js"></script>
|
|
<script src="./tolocalisostring.js"></script>
|
|
<script>
|
|
function $(sel, el) {
|
|
return (el || document.body).querySelector(sel);
|
|
}
|
|
|
|
function translate(dt, tz, tz2) {
|
|
var utc = new Date(XTZ.fromTimeZone(dt, tz).toISOString());
|
|
if (!tz2) {
|
|
return utc;
|
|
}
|
|
return XTZ.toTimeZone(utc, tz2);
|
|
}
|
|
|
|
function fromTimeZone() {
|
|
var curDt = $(".js-dt-tz").value;
|
|
var curTz = $(".js-tz-tz").value;
|
|
$(".js-my-dt-tz").value = XTZ.fromTimeZone(curDt, curTz).toISOString();
|
|
|
|
$(".js-dtx-tz").innerText = curDt;
|
|
$(".js-tzx-tz").innerText = curTz;
|
|
$(".js-myx-dt-tz").innerText = $(".js-my-dt-tz").value;
|
|
}
|
|
|
|
function toTZ() {
|
|
var curDt = $(".js-dt-utc").value;
|
|
var curTz = $(".js-tz-utc").value;
|
|
$(".js-my-dt-utc").value = XTZ.toTimeZone(curDt, curTz).toISOString();
|
|
|
|
$(".js-dtx-utc").innerText = curDt;
|
|
$(".js-tzx-utc").innerText = curTz;
|
|
$(".js-myx-dt-utc").innerText = $(".js-my-dt-utc").value;
|
|
}
|
|
|
|
function xTZ() {
|
|
var curDt = $(".js-dt-xtz").value;
|
|
var inTz = $(".js-tz1-xtz").value;
|
|
var outTz = $(".js-tz2-xtz").value;
|
|
$(".js-my-dt-xtz").value = translate(curDt, inTz, outTz).toISOString();
|
|
}
|
|
|
|
$(".js-my-dt-local").value = XTZ.toLocalISOString();
|
|
|
|
var myTz = new Intl.DateTimeFormat("default", {}).resolvedOptions()
|
|
.timeZone;
|
|
$(".js-my-tz").innerText = myTz;
|
|
$(".js-tz-tz").value = myTz;
|
|
$(".js-tz-utc").value = myTz;
|
|
$(".js-tz1-xtz").value = myTz;
|
|
$(".js-tz2-xtz").value = "Asia/Kathmandu";
|
|
var myOffset = -1 * new Date().getTimezoneOffset();
|
|
$(".js-my-offset").innerText =
|
|
XTZ.formatOffset(myOffset) + " (" + myOffset + ")";
|
|
|
|
var myDate = new Date();
|
|
$(".js-my-dt").innerText = XTZ.toTimeZone(myDate, myTz).toISOString();
|
|
$(".js-dt-tz").value = XTZ.toTimeZone(myDate, myTz)
|
|
.toISOString()
|
|
.replace("T", " ")
|
|
.replace(/(Z|(\+|-)\d+)$/, "");
|
|
$(".js-dt-xtz").value = $(".js-dt-tz").value;
|
|
$(".js-dt-utc").value = myDate.toISOString();
|
|
|
|
$("form.js-utc2tz").addEventListener("submit", function (ev) {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
toTZ();
|
|
});
|
|
$("form.js-tz2utc").addEventListener("submit", function (ev) {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
fromTimeZone();
|
|
});
|
|
|
|
fromTimeZone();
|
|
toTZ();
|
|
xTZ();
|
|
</script>
|
|
</body>
|
|
</html>
|