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内置函数而不是设置{{}来找到一些解脱。 1}}或defaultDate选项。

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

2 个答案: