<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
// 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) {
var date = new Date()
var timeParts = theTime.split(':')
date.setUTCHours(~~timeParts[0])
date.setUTCMinutes(~~timeParts[1])
date.setUTCSeconds(~~timeParts[2])
var formattedTime = date.getHours() + ':' + ('0' + date.getMinutes()).slice(-2)
output.textContent = 'Time in your local time: ' + formattedTime
}
updateTime(inputTime.value);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.