In this article I will explain with an example, how to perform Date of Birth (Age) validation with jQuery DatePicker (Calendar) plugin.
When a Date is selected in jQuery DatePicker (Calendar), the onSelect event is raised and inside the onSelect event handler the validation for Date of Birth (Age) is performed.
This article will perform minimum 18 years of Age validation and the Age will be calculated using the Date selected in the jQuery DatePicker (Calendar).
HTML Markup and jQuery DatePicker implementation
The following HTML Markup consists of a TextBox which has been made Read Only.
Inside the jQuery document ready event handler, the TextBox has been applied with jQuery DatePicker plugin.
The jQuery DatePicker plugin has been assigned following properties:
showOn – button
The jQuery DatePicker will be shown only when the Button next to the TextBox is clicked.
buttonImageOnly – true
The Button will be an Image.
buttonImage – URL
The URL of the Image file to be displayed as Button.
dateFormat – dd/mm/yy
The jQuery DatePicker will set the selected Date in dd/MM/yyyy date format in TextBox.
changeMonth – true
The jQuery DatePicker will show the Month DropDown in Calendar.
changeYear – true
The jQuery DatePicker will show the Year DropDown in Calendar.
yearRange – range value i.e. 1900:+0
The range of Year to be displayed. In this case from year 1900 till current year will be displayed.
The jQuery DatePicker plugin has been assigned following event handlers:
onSelect
When a Date is selected, the onSelect event handler captures the Date value in String format and the JavaScript object of the HTML element i.e. the TextBox to which the jQuery DatePicker plugin is applied and the Date value is passed to the ValidateDOB JavaScript function.
Inside the ValidateDOB JavaScript function, the Date is split into Day, Month and Year.
First the Year is compared with the current Year and if the Year difference is exact 18 then the Month is compared with the current Month.
If the Month also matches the current Month then the Date i.e. Day value is compared.
<input type="text" id="txtDate" name="SelectedDate" readonly="readonly" />
<br />
<span id="lblError" style = "color:Red"></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#txtDate").datepicker({
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'images/calendar.gif',
dateFormat: 'dd/mm/yy',
yearRange: '1900:+0',
onSelect: function (dateString, txtDate) {
ValidateDOB(dateString);
}
});
});
function ValidateDOB(dateString) {
var lblError = $("#lblError");
var parts = dateString.split("/");
var dtDOB = new Date(parts[1] + "/" + parts[0] + "/" + parts[2]);
var dtCurrent = new Date();
lblError.html("Eligibility 18 years ONLY.")
if (dtCurrent.getFullYear() - dtDOB.getFullYear() < 18) {
return false;
}
if (dtCurrent.getFullYear() - dtDOB.getFullYear() == 18) {
//CD: 11/06/2018 and DB: 15/07/2000. Will turned 18 on 15/07/2018.
if (dtCurrent.getMonth() < dtDOB.getMonth()) {
return false;
}
if (dtCurrent.getMonth() == dtDOB.getMonth()) {
//CD: 11/06/2018 and DB: 15/06/2000. Will turned 18 on 15/06/2018.
if (dtCurrent.getDate() < dtDOB.getDate()) {
return false;
}
}
}
lblError.html("");
return true;
}
</script>
Screenshot
![Date of Birth (Age) validation with jQuery DatePicker]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
