Read or Set a Time Input

This JavaScript program shows how to read or set the value of a time input form element.

ReadOrSetATimeInput.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net's Javascript</title>
		<script type="text/javascript" src="ReadOrSetATimeInput.js"></script>
	</head>
	<body>
		<label for="TheTimeInput">Read: <input id="idTimeInput" type="time" name="TheTimeInput" onchange="TimeChanged()" /></label>
		<div>Read Time String: <span id="idTimeString"></span></div>
		<div>Hour: <span id="idHour"></span></div>
		<div>Minute: <span id="idMinute"></span></div>
		<div>UTC Hour: <span id="idUTCHour"></span></div>
		<div>UTC Minute: <span id="idUTCMinute"></span></div>
		<label for="TheSetTimeInputString">Set via string: <input id="idSetTimeInputString" type="time" name="TheSetTimeInputString" /></label><br />
		<label for="TheSetTimeInputDate">Set via Date: <input id="idSetTimeInputDate" type="time" name="TheSetTimeInputDate" /></label>
	</body>
</html>

ReadOrSetATimeInput.js

function TimeChanged() {
	const kqThis = window.event.currentTarget;
	var sValue = kqThis.value;
	
	document.getElementById("idTimeString").innerHTML = sValue;
	var qDate = ParseTimeString(sValue);
	document.getElementById("idHour").innerHTML = qDate.getHours();
	document.getElementById("idMinute").innerHTML = qDate.getMinutes();
	document.getElementById("idUTCHour").innerHTML = qDate.getUTCHours();
	document.getElementById("idUTCMinute").innerHTML = qDate.getUTCMinutes();
		
	// Set the date of the other date input
	document.getElementById("idSetTimeInputString").value = sValue;
	document.getElementById("idSetTimeInputDate").value = ('0'+qDate.getHours()).slice(-2)+":"+('0'+qDate.getMinutes()).slice(-2);
}

function ParseTimeString(sTime) {
	var qDate = new Date();
	var iaHoursMinAmPm = sTime.match( /(\d+)(?::(\d\d))?\s*([ap]?)/ );
	var uiHours = parseInt(iaHoursMinAmPm[1]);
	if (iaHoursMinAmPm[3]) {
		uiHours = (uiHours % 12) + ((iaHoursMinAmPm[3] == 'p') ? 12 : 0);
	}
	qDate.setHours(uiHours);
	qDate.setMinutes( parseInt(iaHoursMinAmPm[2]) || 0 );
	qDate.setSeconds(0, 0);
	return qDate;
}

Core JavaScript

Read or Set a Time Input

ReadOrSetATimeInput.html

ReadOrSetATimeInput.js

Output