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

Question

我正在构建一个预订系统，并希望我们的结帐日期选择器日历显示适当的日期。例如，我在 2018 年 6 月 5 日入住，结帐日历应从 2018 年 6 月开始。为此，我们初始化结帐日历，并将 defaultDate 设置为入住日期。很简单，第一次就成功了。但是，如果我们返回并更改入住日期，结帐日历会将旧的入住日期保留为默认日期。我以为我已经通过破坏结帐日历并使用新的 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.

Answer 2

我最终利用

解决了这个问题

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

而不是使用 defaultDate 或 minDate，即使在页面上的所有其他日期选择器都被销毁后，它们仍保留其值。我在其他地方发布了这个问题，如果我得到任何额外的反馈，我会更新这个答案，但目前，任何有同样问题的人都可以通过使用 setDate built-in 函数而不是设置来找到一些缓解defaultDate 或 minDate 选项。

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

jQuery UI Datepicker destroy and reinitialize calendar with new DefaultDate

javascript

jquery

jquery-ui

jquery-ui-datepicker