<label for="input-time">Time in UTC: </label>
<input value="14:30" type="time" id="input-time">
<p id="local"></p>
body {
padding: 20px;
}
View Compiled
// Get the timezone
// If it's already in storage, just grab from there
if (!sessionStorage.getItem('timezone')) {
var tz = jstz.determine() || 'UTC';
sessionStorage.setItem('timezone', tz.name());
}
var currTz = sessionStorage.getItem('timezone');
// References to DOM elements
var inputTime = document.querySelector("#input-time");
var output = document.querySelector("#local");
// When the input changes, update the local time
inputTime.addEventListener("change", function() {
updateTime(this.value);
});
function updateTime(theTime) {
// Format Moment.js expects:
// 2015-08-12T14:30Z
// Moment.js can help us build it.
var date = moment().format("YYYY-MM-DD");
var stamp = date + "T" + theTime + "Z";
// Create a Moment.js object
var momentTime = moment(stamp);
// Adjust using Moment Timezone
var tzTime = momentTime.tz(currTz);
// Format the time back to normal
var formattedTime = tzTime.format('h:mm A');
output.textContent = "Time in " + currTz + ": " + formattedTime;
}
updateTime(inputTime.value);
This Pen doesn't use any external CSS resources.