Question

I want to compare 3 dates using jquery ui date picker.

I have the following date fields :

• Date of Enquiry
• Travel from date
• Travel to date

The following rules apply :

• The Date of Enquiry must be the most first date
• The Travel from date must be after the Date of Enquiry
• The Travel to date must be after Travel from date

I have the following script:

$(function() {
    $("#inputField").datepicker({
        //defaultDate: "-1w-4d",
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd-mm-yy',
        yearRange: "-90:+90",
        onSelect: function(selectedDate) {
            $("#inputField1").datepicker("option", "minDate", selectedDate);
        }
    });

    $("#inputField1").datepicker({
        //defaultDate: "+1w",
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd-mm-yy',
        yearRange: "-90:+90"

    });

    $("#inputField2").datepicker({
        //defaultDate: "+1w",
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd-mm-yy',
        yearRange: "-90:+90",
        onSelect: function(selectedDate) {
            $("#inputField1").datepicker("option", "minDate", selectedDate);
        }
    });
});

Answer 1

You can use like

<label for="enquiry">Enquiry</label>
<input type="text" id="enquiry" name="enquiry"/>
<label for="from">From</label>
<input type="text" id="from" name="from" disabled/>
<label for="to">to</label>
<input type="text" id="to" name="to" disabled/>

​JavaScript Code:

$(function() {
    $("#enquiry").datepicker({
        defaultDate: "+0d",
        changeMonth: true,
        numberOfMonths: 2,
        onSelect: function(selectedDate) {
            $("#from").datepicker("option", "minDate", selectedDate);
            $("#from").removeAttr("disabled");
        }
    });
    $("#from").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 2,
        onSelect: function(selectedDate) {
            $("#to").datepicker("option", "minDate", selectedDate);
            $("#to").removeAttr("disabled");
        }
    });
    $("#to").datepicker({
        defaultDate: "+2w",
        changeMonth: true,
        numberOfMonths: 2,
        onSelect: function(selectedDate) {
            $("#from").datepicker("option", "maxDate", selectedDate);
        }
    });
});​

Working Demo