Jquery UI Datepicker onSelect and onInput events

Question

I have 2 datepickers in my form, one used for a "pick-up" date and one used for a "drop-off" date.

Here's the code:

$(document).ready(function() {
    $('#datepicker_dropoff').datepicker({
        dateFormat: "dd-mm-yy" 
    });

    $("#datepicker_pickup").datepicker({
        dateFormat: "dd-mm-yy", 
        minDate:  0,
        onSelect: function(date){            
            var date1 =   $('#datepicker_pickup').datepicker('getDate');           
            var date = new Date( Date.parse( date1 ) ); 
            date.setDate( date.getDate() + 0 );        
            var newDate = date.toDateString(); 
            newDate = new Date( Date.parse( newDate ) );                      
            $('#datepicker_dropoff').datepicker("option","minDate",newDate);            
        }
    });
});

As you can see it is set that the dropoff date cannot be before the pickup date, and it's been done of course on purpose.

My problem is that in this format, the datepickers DO NOT keep the value and if I click on the form's Submit button, it keeps telling me that the datepicker fields need to be filled in, even though there's a value in each field. IF I manualyy just delete something in the field and then just add it again, it then works and no field prompt appears. I think it has to do something with adding events ( which the datepicker is missing by default ? )

Can someone please help me out and append this to the code ?

Many thanks in advance.

Answer 1

Ooooldish question but my answer:

So I prefer to change my min/max dates in the .change(function() { }). That way the min/max date only get changed if the dates are actually changed.

Assuming HTML:

<input type='text' id='datepicker_pickup'>
    to
<input type='text' id='datepicker_dropoff'>

And jquery and jqueryui 1.10.2 using this javascript:

$(function() {
    $('#datepicker_dropoff').datepicker({
        dateFormat: "dd-mm-yy"
    }).change(function() {
        var date1 =   $('#datepicker_pickup').datepicker('getDate');
        $('#datepicker_pickup').datepicker('option','maxDate',date1);
    });

    $("#datepicker_pickup").datepicker({
        dateFormat: "dd-mm-yy"
        ,minDate: 0
    }).change(function() {
        var date1 =   $('#datepicker_pickup').datepicker('getDate');
        $('#datepicker_dropoff').datepicker('option','minDate',date1);
    });
});

here's a fiddle