Question

The user has to enter a Date From field and a Date To field.
The Date To field must be after Date From.
How do I enforce this in JQuery?
My current code does not work, not even by giving a default date.

<script type="text/javascript" language="javascript">
    $('#DateFrom').datepicker({ dateFormat: 'dd-MM-yy', changeMonth: true, changeYear:true, yearRange: 'c-1:c+1' });
    $('#DateTo').datepicker({ dateFormat: 'dd-MM-yy', changeMonth: true, changeYear: true, yearRange: 'c-1:c+1' });
    $('#DateFrom').datepicker({ onSelect: function (dateStr) {
        $('#DateTo').datepicker({ defaultDate: dateStr });
    }
    });
    $('#DateTo').datepicker();

</script>

Answer 1

You can use the minValue option of the datepicker.
Sample below:

<input type="text" id="from">
<input type="text" id="to">
<script type="text/javascript">
$(function(){
    $("#to").datepicker();
    $("#from").datepicker().bind("change",function(){
        var minValue = $(this).val();
        minValue = $.datepicker.parseDate("mm/dd/yy", minValue);
        minValue.setDate(minValue.getDate()+1);
        $("#to").datepicker( "option", "minDate", minValue );
    })
});
</script>

Working exmaple @ http://jsfiddle.net/dW4n8/2/

Edit: Updated the sample to exclude the from date too.