End Date should not be greater than Start Date using jQuery Date Picker

How many times you have seen this message on websites? OR as a programmer, you should have implemented this very common date validation which is "End Date should not be greater than Start Date". Gone those days where you write long java script functions for date validation and alert/show a error message on screen. It will be a nice feature where you don't allow end user to make mistake. Okay, enough talking now. In this post I will show you how to make "End Date should not be greater than Start Date" using jQuery and jQuery UI Datepicker.

Read my series of articles about jQuery UI Datepicker.

Required Resources:
1. jQuery
2. jQuery UI and jQuery UI CSS

Okay, so there are mainly 2 kind of validation conditions which are,

1. Start date should not greater than end date.
2. End date should not less then start date.

So let's put 2 textboxes "txtFromDate" and "txtToDate" and assign Date picker to it. With jQuery UI Date picker, there is an event "onSelect" which fires when any date is selected. So using this event, set the date range for other date pickers. 

For example, when from date is selected, then using this "onSelect" event we will set the "minDate" attribute of "txtToDate" textbox to the selected date in "txtFromDate". What it does is that, dates less than the selected from date will be disabled in "txtToDate" textbox. And same way set the "MaxDate" attribute for "txtFromDate" in onSelect event of "txtToDate" textbox. Below is the complete jQuery code.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$(document).ready(function(){     $("#txtFromDate").datepicker({         numberOfMonths: 2,         onSelect: function(selected) {           $("#txtToDate").datepicker("option","minDate", selected)         }     });     $("#txtToDate").datepicker({         numberOfMonths: 2,         onSelect: function(selected) {            $("#txtFromDate").datepicker("option","maxDate", selected)         }     });  });

"numberOfMonths" attribute allows to display multiple months in date picker. Read here about all the attribute of jQuery UI Datepicker.


reference link http://jquerybyexample.blogspot.com/2012/01/end-date-should-not-be-greater-than.html