Core JavaScript

Read or Set a Date Input

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

ReadOrSetADateInput.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net's Javascript</title>
		<script type="text/javascript" src="ReadOrSetADateInput.js"></script>
	</head>
	<body>
		<label for="TheDateInput">Read: <input id="idDateInput" type="date" name="TheDateInput" onchange="DateChanged()" /></label>
		<div>Read String: <span id="idRead"></span></div>
		<div>Year: <span id="idYear"></span></div>
		<div>Month: <span id="idMonth"></span></div>
		<div>Date: <span id="idDate"></span></div>
		<div>Full Date: <span id="idFullDate"></span></div>
		<div>Full Date: <span id="idFullDateUTC"></span></div>
		<label for="TheDTheSetDateInputateInput">Set: <input id="idSetDateInput" type="date" name="TheSetDateInput" /></label>
	</body>
</html>

ReadOrSetADateInput.js

function DateChanged() {
	const kqThis = window.event.currentTarget;
	var sValue = kqThis.value;
	// The difference in milliseconds since 1970 in UTC. The extra string ensures that this UTC, but it probably isn't necessary.
	var iDifferenceInMilliseconds = Date.parse(sValue+'T00:00:00.000Z');
	// This is just used to get the local offset
	var qCurrentDate = new Date();
	var iTimezoneOffset = qCurrentDate.getTimezoneOffset();
	
	
	// This conversion to correct with timezone should work, but it seems probablematic because of Daylight Savings Time
/*
	// Add the offset in minutes = minutes*60*1000 milliseconds to get the correct date
	// Alternatively, we could just get the year, month and date in UTC: qDate.getUTCDate() instead of qDate.getDate()
	var qDate = new Date(iDifferenceInMilliseconds+qCurrentDate.getTimezoneOffset()*60000);
	document.getElementById("idYear").innerHTML = qDate.getFullYear();
	// Month are zero offset. So, the range is 0-11. We add one to make it 1-12
	document.getElementById("idMonth").innerHTML = qDate.getMonth() + 1;
	document.getElementById("idDate").innerHTML = qDate.getDate();
*/

	document.getElementById("idRead").innerHTML = sValue;
	// This, however, does work
	var qDate = new Date(iDifferenceInMilliseconds);
	document.getElementById("idYear").innerHTML = qDate.getUTCFullYear();
	// Month are zero offset. So, the range is 0-11. We add one to make it 1-12
	document.getElementById("idMonth").innerHTML = qDate.getUTCMonth() + 1;
	document.getElementById("idDate").innerHTML = qDate.getUTCDate();
	document.getElementById("idFullDate").innerHTML = qDate.toString();
	document.getElementById("idFullDateUTC").innerHTML = qDate.toUTCString();
	
	// Set the date of the other date input
	document.getElementById("idSetDateInput").value = qDate.getUTCFullYear() + '-' + ('0' + (qDate.getUTCMonth() + 1)).slice(-2) + '-' + ('0' + qDate.getUTCDate()).slice(-2);
}
 

Output

 
 

© 2007–2025 XoaX.net LLC. All rights reserved.