<!DOCTYPE html PUBLIC "-//WHATWG//NONSGML HTML5//EN">
<html>
<head>
<title>Date Control Demo 01</title>
<style type="text/css">
fieldset { padding: 1em; }
</style>
<script type="text/javascript">
var nowInput;
function fixupHints() {
if (!(typeof document == 'object') || !document.getElementsByTagName) return;
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
if (inputs[i].name == 'timezone') {
inputs[i].value = -(new Date).getTimezoneOffset() / 60;
continue;
} // else:
if (inputs[i].name == 'now') {
nowInput = inputs[i];
continue;
}
}
}
function fixupSubmit() {
if (nowInput)
nowInput.value = ((new Date).valueOf() / 1000).toFixed();
}
</script>
</head>
<body onload="fixupHints()">
<p>This form uses some of the date and time controls of Web Forms 2
for data entry, with server-side fallback for legacy clients. You
can see <a href="test-source">the source of the script</a> if you
are curious to see how this was implemented.</p>
<form action="test" method="get" onsubmit="fixupSubmit()">
<fieldset>
<legend>Time between two times</legend>
<p>
<label>
First date and time:
<idatetime required="required">
<input name="t1"> Format: DD/MM/YYYY HH:MM
<!-- XXX add more fieldsets here with other demos -->
<input type="hidden" name="timezone" value="unknown">
<input type="hidden" name="now" value="unknown">
</idatetime>
</label>
</p>
<p>
<label>
Second date and time:
<idatetime required="required">
<input name="t2"> Format: DD/MM/YYYY HH:MM
</idatetime>
</label>
</p>
<p>
<input type="submit" value="Calculate">
</p>
</fieldset>
</form>
</body>
</html>