javascript - jQuery UI Datepicker 使用新的 DefaultDate 销毁并重新初始化日历

Question

我正在构建一个预订系统，并希望我们的结帐日期选择器日历显示适当的日期。例如，我于 2018 年 6 月 5 日 checkin ，结帐日历应从 2018 年 6 月开始。为了实现此目的，我们初始化结帐日历，并将 defaultDate 设置为 checkin 日期。很简单，第一次就可以工作。但是，如果我们返回并更改 checkin 日期，则 checkout 日历会将旧的 checkin 日期保留为默认日期。我以为我已经通过销毁结帐日历并使用新的 defaultDate 重新初始化一个新日历来解决了这个问题，并且实际上可以更改除 defaultDate 之外的任何其他属性。

这是一些代码:

首次结账初始化

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

*选择新的签到日期后*

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

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

这里到底发生了什么？

Answer 1

类似这样的吗？

<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>

演示:JSFiddle .