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

【问题标题】：How to change datepicker options based on a checkbox?如何根据复选框更改日期选择器选项？
【发布时间】：2017-01-30 15:14:47
【问题描述】：

我有一个 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 的复选框需要去哪里以及以什么顺序而苦苦挣扎。另外，我是否只检查该框是否被选中，或者是否需要在复选框上的“更改”事件上更改日期选择器参数？

以下是错误的，但希望它有助于说明我是如何困惑自己的：

$( "#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*/
        });
    }
});

【问题讨论】：

标签： javascript jquery jquery-ui datepicker jquery-ui-datepicker

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您无需重新初始化日期选择器，只需在复选框更改处理程序中使用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

【讨论】：