Multiple inline datepickers, change options of another datepicker, does not redraw/refresh

[robin]

An expansion to ticket #3159

Consider 2 inline datepickers:

<script src="../media/js/jquery.js" type="text/javascript"></script>

<script src="../media/js/ui.datepicker.min.js" type="text/javascript"></script>

<link href="../media/css/ui.datepicker.css" type="text/css" rel="stylesheet"></script>

<input id="start" /><div id="start_div"></div>

<input id="end" /><div id="end_div"></div>

<script>

$(document).ready(function(){

$('#start_div').datepicker({

onSelect:function(input_val){

$('#start').val(input_val)

var min_date=new Date(new Date($('#start').val()).getTime()+1*24*60*60*1000) +1 day $('#end_div').data('minDate.datepicker',min_date)

}

}) $('#end_div').datepicker({

onSelect:function(input_val){

$('#end').val(input_val)

}

})

}) </script>

Select a date from the start calendar and then the end calendar seems to have its minDate property updated, BUT does not redraw to show the changes UNLESS you click a date on the end calendar.

Should the redraw be automatic? Or is there a function to refresh it manually $.datepicker._refreshDatepicker($('#end_div')) which doesn't work ?

[kbwood]

Use the 'change' command to change the datepicker settings instead of data(), i.e. $('#end_div').datepicker('change', {minDate: min_date}).

Also see the 'Another Date Range' example on the datepicker functional demos page for a synchronised date range across two input fields.

[robin]

'change' command, as your example demonstrates, works. The other datepicker redraws automatically. Thank you.

[Scott González]

Milestone TBD deleted