<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h3>Input date and time separately and click the link to generate output</h3>
<label>Now</label>
<p id="outputNow"></p>
<br />
<label>Input date</label>
<input id="date" type="date" value="2010-01-01" />
<br />
<label>Input time</label>
<input id="time" type="time" value="02:34" />
<br />
<button id="btnSubmit" onclick="submitDatetime()">Submit</button>
<br />
<br />
<label>output</label>
<p id="output"></p>
<span>Date: </span><p id="output2"></p>
<span>Time: </span><p id="output3"></p>
<span>UTC Time: </span><p id="output4"></p>
<script src="script.js"></script>
</body>
</html>
var date = new Date();
document.getElementById("outputNow").innerHTML = date;
function submitDatetime(){
var date = new Date();
//time is of form hh:mm (24 hour format)
var inputDate = document.getElementById("date").value;
var inputTime = document.getElementById("time").value;
date.setHours(inputTime.substring(0,2));
date.setMinutes(inputTime.substring(3,5));
date.setSeconds(0);
date.setFullYear(inputDate.substring(0,4));
//Months are set 0 indexed, but display 1 indexed so subtract 1
date.setMonth(inputDate.substring(5,7) - 1);
date.setDate(inputDate.substring(8,10));
document.getElementById("output").innerHTML = date;
document.getElementById("output2").innerHTML = inputDate;
document.getElementById("output3").innerHTML = inputTime;
document.getElementById("output4").innerHTML = date.toUTCString();
}
/* Styles go here */