CODEWITHSUNDEEP
jquery
arame3333
arame3333

Reputation: 10193

JQuery: 1 datepicker From date to constrain the To date

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>

Upvotes: 1

Views: 5784

Answers (2)

Chandu
Chandu

Reputation: 82893

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.

Upvotes: 2

Alex T.
Alex T.

Reputation: 46

I am afraid you have to add custom validation to the appropriate callbacks. AFAIK there is no such thing as a minimum date in jquery datepickers. I suggest you also take a look at onClose callback.

Upvotes: 0

Related Questions