<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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jstz.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/moment.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/moment-timezone.js

Packages

This Pen doesn't use any packages.