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 below does that, but for some reason closes the datepicker straight away.

Any ideas? - /

From <input type="text" id="dateFrom" />
To <input type="text" id="dateTo" /> 

jQuery

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

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

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 below does that, but for some reason closes the datepicker straight away.

Any ideas? - http://jsfiddle/rN4zu/

From <input type="text" id="dateFrom" />
To <input type="text" id="dateTo" /> 

jQuery

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

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

• javascript
• jquery
• jquery-ui
• datepicker
• jquery-ui-datepicker

Share Improve this question Follow asked Jul 25, 2012 at 15:41 TomTom 13k5050 gold badges153153 silver badges247247 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

http://jsfiddle/8YTKR/

The problem has to do with mands ramping up against each other. The set min date mand 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 mand. And because that mand 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.

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

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