Date Time Form Input Type Tutorial
Published : November 16, 2014Last Edited : November 24, 2025
Author : Adam Khoury
Learn to program HTML Date and Time Form input attributes and tie the fields to your JavaScript program.
<!DOCTYPE html>
<html>
<head>
<script>
function processData(f1,f2,f3,f4,f5,f6){
var v1 = document.getElementById(f1).value;
var v2 = document.getElementById(f2).value;
var v3 = document.getElementById(f3).value;
var v4 = document.getElementById(f4).value;
var v5 = document.getElementById(f5).value;
var v6 = document.getElementById(f6).value;
alert(v1+"n"+v2+"n"+v3+"n"+v4+"n"+v5+"n"+v6);
// send the values to server storage
}
</script>
</head>
<body>
<h2>HTML5 + Javascript Date Time Form Input Types Tutorial</h2>
Date: <input type="date" name="field1" id="field1"><br><br>
Datetime local: <input type="datetime-local" name="field2" id="field2"><br><br>
Datetime: <input type="datetime" name="field3" id="field3"><br><br>
Month: <input type="month" name="field4" id="field4"><br><br>
Time: <input type="time" name="field5" id="field5"><br><br>
Week: <input type="week" name="field6" id="field6"><br><br>
<input type="button" onClick="processData('field1','field2','field3','field4','field5','field6')" value="Submit">
</body>
</html>