Simple, elegant, and effective date inputs. The following example is mocked up as an age verification, but just to show how to do custom validation.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(function() {
$("#frm-verify-age").submit(function(){
var age = 18;
var mydate = new Date($("#bday").val());
mydate.setFullYear(mydate.getFullYear());
var currdate = new Date();
currdate.setFullYear(currdate.getFullYear() - age);
if ((currdate - mydate) < 0){
alert("Sorry, only persons over the age of " + age + " may enter this site");
return false;
}
return true;
});
$("#bday").datepicker({
buttonText: 'Choose a Date'
});
$("#bday").mask("99/99/9999");
});
});
</script>
</head>
<body>
<form name="frm-verify-age" id="frm-verify-age">
Birthdate <input style="background-color:#FFFFa0" type="text" id="bday" name="bday" size="12" />
<input name="frm-verify-submit" id="frm-verify-submit" type="submit" value="submit" />
</form>
</body>Why is this better than just a normal JQuery Datepicker for me?
I’ve found that while developers and designers love visual date pickers, the common user will more often default to typing in their date. The date they are being asked for is often something they’ve memorized and typed in countless times: birthdates, hire dates, etc. So it is important to allow both user types to use the control and make sure both allow valid dates to be selected. Thus the mask functionality works very well.
It doesn’t solve all my validation. If they type it in I’ll still need to validate that they did not type in 99/99/9999. That can be done in the same space I’m checking age.
my programming experiments 