Question

我有一个jQuery UI datepicker，我只希望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需要检查的复选框的位置以及顺序。另外，我只是检查框是否被选中，或者是否需要更改日期选择器参数更改＆＃34;更改＆＃34;复选框上的事件？

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

$( "#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

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

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

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

Answer 2

您无需重新初始化日期选择器，只需在复选框更改处理程序中使用minDate函数即可。

这是一个工作示例：

<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

{{1}}

如何根据复选框更改datepicker选项？

2 个答案: