Jquery Datepicker - Activate Another Datepicker On Select

I have 2 jquery datepickers to select a date range. Once I have selected a from date (from the first datepicker), I would like to activate the second (to) datepicker. The code bel

Solution 1:

http://jsfiddle.net/8YTKR/

The problem has to do with commands ramping up against each other. The set min date command and .focus are happening at the same time, which is causing the problem.

Ok, so first of all .focus is not the preferred way of triggering a datepicker. The preferred way is to use the datapicker show method which looks like this .datepicker('show');. So in this example we are going to use that instead.

Next we need to make sure that 'show' occurs AFTER the min date command. And because that command has no callback I am going to use setTimeout

$( "#dateFrom" ).datepicker({
    minDate: 0, 
    maxDate: "+2Y",
    showWeek: true,
    weekHeader: 'Wk',
    onSelect: function( selectedDate ) {
        $( "#dateTo" ).datepicker("option", "minDate", selectedDate );
        setTimeout(function(){
            $( "#dateTo" ).datepicker('show');
        }, 16);     
    }
});

$( "#dateTo" ).datepicker({
    maxDate: "+2Y",
    showWeek: true,
    weekHeader: 'Wk'
});

Why 16ms you say? Because its the longest delay possible without it showing up on screen. 16ms is the default jquery animate interval for this very reason.

Solution 2:

$( "#dateTo" ).datepicker("option", "minDate", selectedDate ).focus(0);

Solution 3:

my suggestion would be to allow the user to pick any date that they would like in either datepicker, then do a validation on both text boxes after the dates are chosen.

The problem with setting the date range in the second datepicker from the value in the first datepicker is if a user chooses , say July 21 by accident, then the second date picker will start at July 21 , but then when they go to change the first date picker to July 1 , the second date picker will be stuck at dates after July 21