Skip to content

Instantly share code, notes, and snippets.

@montmanu

montmanu/index.html

Created September 13, 2017 04:04
Show Gist options
  • Save montmanu/aea968849359a34a302ff7277e17c8a6 to your computer and use it in GitHub Desktop.
Save montmanu/aea968849359a34a302ff7277e17c8a6 to your computer and use it in GitHub Desktop.
Download ZIP
Moment Timezone Examples // source https://jsbin.com/jaweyowaru
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Moment Timezone Examples</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone.min.js"></script>
<style id="jsbin-css">
html, body {
box-sizing: content-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
dt {
width: 20vw;
float: left;
padding-right: 12px;
font-weight: bold;
text-align: right;
}
dl {
width: 80vw;
text-align: left;
clear: both;
}
footer {
position: absolute;
bottom: 12px;
left: 0;
right: 0;
width: auto;
text-align: center;
}
</style>
</head>
<body>
<h1>Moment Timezone Examples</h1>
<label for="date">Date: </label>
<input type="date" name="date" id="date" value="2017-08-30" />
<br />
<label for="time">Time: </label>
<input type="time" name="time" id="time" value="15:12:57" />
<br />
<label for="offset">Offset: </label>
<input type="range" name="offset" id="offset" list="offsets" value="0" min="-14" max="14" step="1" />
<datalist id="offsets">
<option value="-14" label="-14:00">
<option value="-13">
<option value="-12">
<option value="-11">
<option value="-10">
<option value="-9">
<option value="-8">
<option value="-7">
<option value="-6">
<option value="-5">
<option value="-4">
<option value="-3">
<option value="-2">
<option value="-1">
<option value="0" label="UTC">
<option value="1">
<option value="2">
<option value="3">
<option value="4">
<option value="5">
<option value="6">
<option value="7">
<option value="8">
<option value="9">
<option value="10">
<option value="11">
<option value="12">
<option value="13">
<option value="14" label="+14:00">
</datalist>
<h2>Current Values</h2>
<dl>
<dt>Date</dt>
<dd id="date-current"></dd>
<dt>Time</dt>
<dd id="time-current"></dd>
<dt>Offset</dt>
<dd id="offset-current"></dd>
<dt>ISO String</dt>
<dd id="iso-current"></dd>
</dl>
<h2>Moments</h2>
<dl>
<dt>Default</dt>
<dd id="default"></dd>
<dt>Asia/Tokyo</dt>
<dd id="jt"></dd>
<dt>GMT</dt>
<dd id="gmt"></dd>
<dt>America/New_York</dt>
<dd id="et"></dd>
<dt>America/Los_Angeles</dt>
<dd id="pt"></dd>
</dl>
<footer>Now: <span id="now"></span></footer>
<script id="jsbin-javascript">
(function (w, d){
var moment = w.moment;
// element references
var dateEl = d.querySelector('#date');
var dateCurrEl = d.querySelector('#date-current');
var timeEl = d.querySelector('#time');
var timeCurrEl = d.querySelector('#time-current');
var offsetEl = d.querySelector('#offset');
var offsetCurrEl = d.querySelector('#offset-current');
var isoCurrEl = d.querySelector('#iso-current');
var defaultEl = d.querySelector('#default');
var nowEl = d.querySelector('#now');
var gmtEl = d.querySelector('#gmt');
var etEl = d.querySelector('#et');
var ptEl = d.querySelector('#pt');
var jtEl = d.querySelector('#jt');
// from https://raw.githubusercontent.com/moment/moment-timezone/develop/data/packed/latest.json
// see https://momentjs.com/timezone/docs/#/data-loading/loading-a-data-bundle/
moment.tz.load({
zones : [
'Asia/Tokyo|JST JDT|-90 -a0|010101010|-QJH0 QL0 1lB0 13X0 1zB0 NX0 1zB0 NX0|38e6',
'America/Los_Angeles|PST PDT PWT PPT|80 70 70 70|010102301010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010|-261q0 1nX0 11B0 1nX0 SgN0 8x10 iy0 5Wp1 1VaX 3dA0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1fA0 1a00 1fA0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1cN0 1cL0 1cN0 1cL0 s10 1Vz0 LB0 1BX0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0|15e6',
'America/New_York|EST EDT EWT EPT|50 40 40 40|01010101010101010101010101010101010101010101010102301010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010|-261t0 1nX0 11B0 1nX0 11B0 1qL0 1a10 11z0 1qN0 WL0 1qN0 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1qN0 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1qN0 WL0 1qN0 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1qN0 WL0 1qN0 11z0 1o10 11z0 RB0 8x40 iv0 1o10 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1qN0 WL0 1qN0 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1o10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1cN0 1cL0 1cN0 1cL0 s10 1Vz0 LB0 1BX0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0|21e6',
'Etc/UTC|UTC|0|0|'
],
links : [],
version : '2017b'
});
// gets the input's value, converts it to a valid timezone offset string
function getCurrentOffsetFormatted() {
var val = parseInt(offsetEl.value, 10);
var absval = Math.abs(val);
if (val === 0) return 'Z';
if (absval < 10) {
if (val < 0) {
return '-0' + absval + ':00';
}
return '+0' + absval + ':00';
}
if (val < 0) {
return '-' + absval + ':00';
}
return '+' + absval + ':00';
}
function getCurrentDate() {
return dateEl.value;
}
function getCurrentTime() {
return timeEl.value;
}
// generates a timestamp string from current input values
function getCurrentISO() {
var cd = getCurrentDate();
var ct = getCurrentTime();
var co = getCurrentOffsetFormatted();
return '' + cd + 'T' + ct + '.000' + co;
}
function render() {
dateCurrEl.innerText = getCurrentDate();
timeCurrEl.innerText = getCurrentTime();
offsetCurrEl.innerText = getCurrentOffsetFormatted();
isoCurrEl.innerText = getCurrentISO();
var now = moment().tz('America/New_York');
var currentISOStr = getCurrentISO();
var defaultMoment = moment(currentISOStr);
var gmt = moment.tz(currentISOStr, 'Etc/UTC');
var et = moment.tz(currentISOStr, 'America/New_York');
var pt = moment.tz(currentISOStr, 'America/Los_Angeles');
var jt = moment.tz(currentISOStr, 'Asia/Tokyo');
nowEl.innerText = now.format('LLLL');
defaultEl.innerText = defaultMoment.format('LLLL');
gmtEl.innerText = gmt.format('LLLL');
etEl.innerText = et.format('LLLL');
ptEl.innerText = pt.format('LLLL');
jtEl.innerText = jt.format('LLLL');
}
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function onReady() {
[dateEl, timeEl, offsetEl].forEach(function (el){
el.addEventListener('change', render);
});
render();
}
ready(onReady);
})(window, document);
</script>
<script id="jsbin-source-css" type="text/css">html, body {
box-sizing: content-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
dt {
width: 20vw;
float: left;
padding-right: 12px;
font-weight: bold;
text-align: right;
}
dl {
width: 80vw;
text-align: left;
clear: both;
}
footer {
position: absolute;
bottom: 12px;
left: 0;
right: 0;
width: auto;
text-align: center;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">(function (w, d){
var moment = w.moment;
// element references
var dateEl = d.querySelector('#date');
var dateCurrEl = d.querySelector('#date-current');
var timeEl = d.querySelector('#time');
var timeCurrEl = d.querySelector('#time-current');
var offsetEl = d.querySelector('#offset');
var offsetCurrEl = d.querySelector('#offset-current');
var isoCurrEl = d.querySelector('#iso-current');
var defaultEl = d.querySelector('#default');
var nowEl = d.querySelector('#now');
var gmtEl = d.querySelector('#gmt');
var etEl = d.querySelector('#et');
var ptEl = d.querySelector('#pt');
var jtEl = d.querySelector('#jt');
// from https://raw.githubusercontent.com/moment/moment-timezone/develop/data/packed/latest.json
// see https://momentjs.com/timezone/docs/#/data-loading/loading-a-data-bundle/
moment.tz.load({
zones : [
'Asia/Tokyo|JST JDT|-90 -a0|010101010|-QJH0 QL0 1lB0 13X0 1zB0 NX0 1zB0 NX0|38e6',
'America/Los_Angeles|PST PDT PWT PPT|80 70 70 70|010102301010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010|-261q0 1nX0 11B0 1nX0 SgN0 8x10 iy0 5Wp1 1VaX 3dA0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1fA0 1a00 1fA0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1cN0 1cL0 1cN0 1cL0 s10 1Vz0 LB0 1BX0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0|15e6',
'America/New_York|EST EDT EWT EPT|50 40 40 40|01010101010101010101010101010101010101010101010102301010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010|-261t0 1nX0 11B0 1nX0 11B0 1qL0 1a10 11z0 1qN0 WL0 1qN0 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1qN0 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1qN0 WL0 1qN0 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1qN0 WL0 1qN0 11z0 1o10 11z0 RB0 8x40 iv0 1o10 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1qN0 WL0 1qN0 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1o10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1cN0 1cL0 1cN0 1cL0 s10 1Vz0 LB0 1BX0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0|21e6',
'Etc/UTC|UTC|0|0|'
],
links : [],
version : '2017b'
});
// gets the input's value, converts it to a valid timezone offset string
function getCurrentOffsetFormatted() {
var val = parseInt(offsetEl.value, 10);
var absval = Math.abs(val);
if (val === 0) return 'Z';
if (absval < 10) {
if (val < 0) {
return '-0' + absval + ':00';
}
return '+0' + absval + ':00';
}
if (val < 0) {
return '-' + absval + ':00';
}
return '+' + absval + ':00';
}
function getCurrentDate() {
return dateEl.value;
}
function getCurrentTime() {
return timeEl.value;
}
// generates a timestamp string from current input values
function getCurrentISO() {
var cd = getCurrentDate();
var ct = getCurrentTime();
var co = getCurrentOffsetFormatted();
return '' + cd + 'T' + ct + '.000' + co;
}
function render() {
dateCurrEl.innerText = getCurrentDate();
timeCurrEl.innerText = getCurrentTime();
offsetCurrEl.innerText = getCurrentOffsetFormatted();
isoCurrEl.innerText = getCurrentISO();
var now = moment().tz('America/New_York');
var currentISOStr = getCurrentISO();
var defaultMoment = moment(currentISOStr);
var gmt = moment.tz(currentISOStr, 'Etc/UTC');
var et = moment.tz(currentISOStr, 'America/New_York');
var pt = moment.tz(currentISOStr, 'America/Los_Angeles');
var jt = moment.tz(currentISOStr, 'Asia/Tokyo');
nowEl.innerText = now.format('LLLL');
defaultEl.innerText = defaultMoment.format('LLLL');
gmtEl.innerText = gmt.format('LLLL');
etEl.innerText = et.format('LLLL');
ptEl.innerText = pt.format('LLLL');
jtEl.innerText = jt.format('LLLL');
}
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function onReady() {
[dateEl, timeEl, offsetEl].forEach(function (el){
el.addEventListener('change', render);
});
render();
}
ready(onReady);
})(window, document);</script></body>
</html>
Raw
jsbin.jaweyowaru.css
html, body {
box-sizing: content-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
dt {
width: 20vw;
float: left;
padding-right: 12px;
font-weight: bold;
text-align: right;
}
dl {
width: 80vw;
text-align: left;
clear: both;
}
footer {
position: absolute;
bottom: 12px;
left: 0;
right: 0;
width: auto;
text-align: center;
}
Raw
jsbin.jaweyowaru.js
(function (w, d){
var moment = w.moment;
// element references
var dateEl = d.querySelector('#date');
var dateCurrEl = d.querySelector('#date-current');
var timeEl = d.querySelector('#time');
var timeCurrEl = d.querySelector('#time-current');
var offsetEl = d.querySelector('#offset');
var offsetCurrEl = d.querySelector('#offset-current');
var isoCurrEl = d.querySelector('#iso-current');
var defaultEl = d.querySelector('#default');
var nowEl = d.querySelector('#now');
var gmtEl = d.querySelector('#gmt');
var etEl = d.querySelector('#et');
var ptEl = d.querySelector('#pt');
var jtEl = d.querySelector('#jt');
// from https://raw.githubusercontent.com/moment/moment-timezone/develop/data/packed/latest.json
// see https://momentjs.com/timezone/docs/#/data-loading/loading-a-data-bundle/
moment.tz.load({
zones : [
'Asia/Tokyo|JST JDT|-90 -a0|010101010|-QJH0 QL0 1lB0 13X0 1zB0 NX0 1zB0 NX0|38e6',
'America/Los_Angeles|PST PDT PWT PPT|80 70 70 70|010102301010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010|-261q0 1nX0 11B0 1nX0 SgN0 8x10 iy0 5Wp1 1VaX 3dA0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1fA0 1a00 1fA0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1cN0 1cL0 1cN0 1cL0 s10 1Vz0 LB0 1BX0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0|15e6',
'America/New_York|EST EDT EWT EPT|50 40 40 40|01010101010101010101010101010101010101010101010102301010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010|-261t0 1nX0 11B0 1nX0 11B0 1qL0 1a10 11z0 1qN0 WL0 1qN0 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1qN0 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1qN0 WL0 1qN0 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1qN0 WL0 1qN0 11z0 1o10 11z0 RB0 8x40 iv0 1o10 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1qN0 WL0 1qN0 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1o10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1cN0 1cL0 1cN0 1cL0 s10 1Vz0 LB0 1BX0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0|21e6',
'Etc/UTC|UTC|0|0|'
],
links : [],
version : '2017b'
});
// gets the input's value, converts it to a valid timezone offset string
function getCurrentOffsetFormatted() {
var val = parseInt(offsetEl.value, 10);
var absval = Math.abs(val);
if (val === 0) return 'Z';
if (absval < 10) {
if (val < 0) {
return '-0' + absval + ':00';
}
return '+0' + absval + ':00';
}
if (val < 0) {
return '-' + absval + ':00';
}
return '+' + absval + ':00';
}
function getCurrentDate() {
return dateEl.value;
}
function getCurrentTime() {
return timeEl.value;
}
// generates a timestamp string from current input values
function getCurrentISO() {
var cd = getCurrentDate();
var ct = getCurrentTime();
var co = getCurrentOffsetFormatted();
return '' + cd + 'T' + ct + '.000' + co;
}
function render() {
dateCurrEl.innerText = getCurrentDate();
timeCurrEl.innerText = getCurrentTime();
offsetCurrEl.innerText = getCurrentOffsetFormatted();
isoCurrEl.innerText = getCurrentISO();
var now = moment().tz('America/New_York');
var currentISOStr = getCurrentISO();
var defaultMoment = moment(currentISOStr);
var gmt = moment.tz(currentISOStr, 'Etc/UTC');
var et = moment.tz(currentISOStr, 'America/New_York');
var pt = moment.tz(currentISOStr, 'America/Los_Angeles');
var jt = moment.tz(currentISOStr, 'Asia/Tokyo');
nowEl.innerText = now.format('LLLL');
defaultEl.innerText = defaultMoment.format('LLLL');
gmtEl.innerText = gmt.format('LLLL');
etEl.innerText = et.format('LLLL');
ptEl.innerText = pt.format('LLLL');
jtEl.innerText = jt.format('LLLL');
}
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function onReady() {
[dateEl, timeEl, offsetEl].forEach(function (el){
el.addEventListener('change', render);
});
render();
}
ready(onReady);
})(window, document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment