Learning jQuery

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 less 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.

Earlier I had posted about Validate Date format, Validate Date using jQuery, Validate email address and Validate Phone numbers. And in this post, find how to make "End Date should not be less 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.

$(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.

See result below.

Okay, this is interesting. But there is one more important condition which is also needed.

1. Start date should not be greater than today's date.

Along with, there is one more functionality which you must have seen like many websites like flight booking, railway booking where there is a limit for To Date as well. For example, in India train ticket booking is only possible for next 90 days from the current date.

Okay so let's see that how we can implement these 2 conditions as well using jQuery UI DatePicker.

jQuery UI DatePicker provides attributes "MinDate" and "MaxDate" which allows to set minimum permissible date and maximum permissible date. So when "minDate" attribute is set to 0, then past dates will become disable from current date. And set "maxDate" to "+90D" which will make all the future dates disable except 90 days from current date. See below jQuery code. In this example, I have set "maxDate" to 60 days plus only.

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

See result below.

One advice: If you are still using Java Script, stop using it and switch to jQuery.

Feel free to contact me for any help related to jQuery, I will gladly help you.