Keep in mind that JavaScript will fail at least one in ten times so if this validation is at all important then you will need some server side redundancy. In certain places this is required by accessibility laws. But this might be a start:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>form example</title>
<script type="text/javascript">
<!--
Number.prototype.toPadded = function (p) {var n = Number(this); var s = ''; if (/^0+$/.test(p) && n < 0) {s = '-'; n = Math.abs(n)}; return s + p.slice(0, 0 - n.toString().match(/^[^.]*/)[0].length) + n.toString()}
Date.prototype.toString = function () {return [['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jne', 'Jly', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][this.getMonth()], this.getDate().toPadded('00'), this.getFullYear()].join(' ')};
window.onload = function () {document.forms[0].checkIn.value = new Date()}
function handleForm (f) {
out = new Date(f.checkOut.value);
now = new Date();
if (out < now) {alert ('That doesn\'t seem to work.'); f.checkOut.value = ''; f.checkout.focus(); return false};
}
// -->
</script>
<form action="handler.pl" onsubmit="return handleForm(this)">
<p><label for="checkIn">Check in:</label><br><input type="text" name="checkIn"onchange="this.value= new Date(this.value)"></p>
<p><label for="checkOut">Check out:</label><br><input type="text" name="checkOut" onchange="this.value= new Date(this.value)"></p>
<p><input type="submit"></p>
</form>