如何根据复选框更改日期选择器选项？

Question

我有一个 jQuery UI 日期选择器，我只希望在该选择器上显示 5 天后（或更长时间）的日期。这适用于：

var dateToday = new Date(); 
$( "#datepicker" ).datepicker({
    minDate: '+1w', // your min date
    beforeShowDay: $.datepicker.noWeekends // disable weekends
});

我还有一个复选框，如果选中，基本上会覆盖 minDate 并使 minDate 可用 今天的 日期（而不是一周外）：

<input type="checkbox" class="lessThanFiveDays" value="1" name="less-than-5-days" />I need this earlier than the standard 5 business days

我正在为检查 jQuery 复选框的位置和顺序而苦恼。另外，我是只检查复选框是否被选中，还是需要在复选框的 "change" 事件上更改日期选择器参数？

以下是错误的，但希望它能帮助说明我自己是多么的困惑：

$( "#datepicker" ).datepicker({
    minDate: '+1w', // your min date
    beforeShowDay: $.datepicker.noWeekends // disable weekends*/
});
$('.lessThanFiveDays').change(function() {
    if($(this).is(":checked")) {
        $( "#datepicker" ).datepicker({
            minDate: dateToday, // your min date
            beforeShowDay: $.datepicker.noWeekends // disable weekends*/
        });
    }
});

Answer 1

日期选择器已经初始化，因此对初始化器的第二次调用将不起作用。请改用 option 方法，如 http://api.jqueryui.com/datepicker/#option-minDate:

$("#datepicker").datepicker("option", "minDate", dateToday);

示例：https://jsfiddle.net/dets1x11/

Answer 2

您不需要 re-initialize 日期选择器，只需使用复选框更改处理程序中的 minDate 函数即可。

这是一个工作示例：

var dateToday = new Date(); 
$( "#datepicker" ).datepicker({
  minDate: '+1w',
  beforeShowDay: $.datepicker.noWeekends
});
$('.lessThanFiveDays').change(function() {
  if( $(this).is(":checked") ) {
    $("#datepicker").datepicker("option", "minDate", dateToday);
  } else {
    $("#datepicker").datepicker("option", "minDate", '+1w');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>

<input type="text" id="datepicker">
<input type="checkbox" class="lessThanFiveDays" value="1" name="less-than-5-days" />I need this earlier than the standard 5 business days

如何根据复选框更改日期选择器选项？

How to change datepicker options based on a checkbox?

javascript

jquery

jquery-ui

datepicker

jquery-ui-datepicker