Javascript jQuery UI日期选择器使用新的DefaultDate销毁并重新初始化日历

我正在建立一个预订系统，并希望我们的结账日期选择器日历显示适当的日期。例如，我在2018年6月5日结账，结账日历应在2018年6月开始。为了实现这一点，我们将默认日期设置为签入日期来初始化签出日历。很简单，而且第一次就成功了。但是，如果我们返回并更改签入日期，签出日历将保留默认的旧签入日期。我以为我已经解决了这个问题，销毁了结帐日历并用新的defaultDate重新初始化了一个新日历，事实上，我可以更改defaultDate之外的任何其他属性

下面是一些代码：

首次签出初始化

*选择新签入日后*

$( "#checkout" ).datepicker( "destroy" );

如果我试图在控制台中简化操作，我会手动销毁签出日历，检查以确保在单击签出字段时它不会弹出，然后仅使用defaultDate参数重新初始化新的签出日历。这会显示一个带有旧日期的默认单月日历

这里究竟发生了什么事？

类似的事情

<p>Check-in: <input type="text" id="datepicker-check-in"></p>
<p>Check-out: <input type="text" id="datepicker-check-out"></p>

<script>
 $( function() {
    var check_in_datepicker, check_out_datepicker;

    check_in_datepicker = $( "#datepicker-check-in" ).datepicker({
        minDate: new Date(), // sets min date to today
        onSelect: function( dateText, instance ){
            // When selecting a date in the check-in field, 
            // update check-out's min date to make sure
            // it can't be older than check-in's date
            check_out_datepicker.datepicker('option', 'minDate', dateText);
        }
    });

    check_out_datepicker = $( "#datepicker-check-out" ).datepicker({
        minDate: new Date(),  // sets min date to today
    });

} );
</script>

签入：

退房：

$（函数（）{
var签入日期选择器，签出日期选择器；
签入日期选择器=$（“#日期选择器签入”）。日期选择器({
minDate:new Date（），//将最小日期设置为今天
onSelect:函数（日期文本，实例）{
//在签入字段中选择日期时，
//更新签出的最小日期以确保
//不能早于入住日期
查看datepicker.datepicker（'option'，'minDate'，dateText）；
}
});
签出日期选择器=$（“#日期选择器签出”）。日期选择器({
minDate:new Date（），//将最小日期设置为今天
});
} );

---

演示：。

我最终通过利用

$("#checkout").datepicker({
  numberOfMonths: 2,
  changeMonth: false,
  changeYear: false,
  beforeShow: function() {...},
  beforeShowDay: function(date) {...}
})
$("#checkin").datepicker("setDate", checkin);

而不是使用

defaultDate

或

minDate

，即使页面上的所有其他日期选择器都已被销毁，它们仍保留其值。我在其他地方发布了这个问题，如果我得到任何额外的反馈，我会更新这个答案，但是目前，任何有相同问题的人都可以通过使用

setDate

内置功能，而不是设置

defaultDate

或

minDate

选项来缓解

$("#checkout").datepicker({
  numberOfMonths: 2,
  changeMonth: false,
  changeYear: false,
  beforeShow: function() {...},
  beforeShowDay: function(date) {...}
})
$("#checkin").datepicker("setDate", checkin);