jQuery Datepicker - Programatically Limit Second Datepicker

Question

Hello all,

I've recently been using the following piece of code to limit my 2nd Date picker (end date) so that it does not precede the date of the 1st Date picker.

$("#datepicker").datepicker({
 minDate: +5, 
 maxDate: '+1M +10D',  
 onSelect: function(dateText, inst){
           var the_date = dateText;
           $("#datepicker2").datepicker('option', 'minDate', the_date);

 }
 });
 $("#datepicker2").datepicker({

    maxDate: '+1M +10D', 
    onSelect: function(dateText, inst){

    }                       
});

However, lately, I wanted to format my datepickers using:

dateFormat: 'yy-mm-dd'

But now, the 2nd datepicker actually allows the user to pick a date 1 day before.

For example, if the user picks the 1st date: 2010-04-03, when the 2nd Datepicker pops up, they are able to pick 2010-04-02 (1 day before their first selected date).

I do not want the user to be able to pick a date that was before their first selected day.

Any ideas why this isn't working after I added in the "dateFormat"?

Answer 1

option minDate expect a date object not a string object.. you can however specify the format and do the conversion as follow:

$(document).ready(function() {  //Runs when tab is loaded

var dateFormat = "yy-mm-dd";

$("#datepicker").datepicker({
 minDate: +5, 
 dateFormat:dateFormat,
 maxDate: '+1M +10D',  
 onSelect: function(dateText, inst){
           var the_date = $.datepicker.parseDate(dateFormat,dateText);
           $("#datepicker2").datepicker('option', 'minDate', the_date)
 }
 });
 $("#datepicker2").datepicker({

    maxDate: '+1M +10D', 
    dateFormat:dateFormat,
    onSelect: function(dateText, inst){

    }                       
});


});