更改 jQuery datepicker 中不同表单的可选日期，同时保持其他选项相同和 DRY

Question

我想做的就是让我的日期选择器代码保持干燥，但我似乎无法让我的更改生效。我有一组通用选项，我想在所有日期选择器中保留这些选项：

var dateToday = new Date(); 
$(".selectdate").datepicker({
    dateFormat: 'd MM yy',
    showOtherMonths: true,
    selectOtherMonths: true
});

但是有些日期选择器我需要 maxDate 选项，而其他一些我需要 minDate 选项，但我无法让它工作。例如：

$("#calldate").datepicker({
    maxDate: dateToday
});

所以我有一个 ID 为 'calldate' 和 class 'selectdate' 的输入字段，我原以为这会起作用，但它不起作用 - 日历显示并设置了所有选项对于 $('.selectdate').... 但 maxDate 不起作用。我不想为我拥有的每个日期选择器重复代码，如下所示：

$("#fromdate").datepicker({
    dateFormat: 'd MM yy',
    showOtherMonths: true,
    selectOtherMonths: true,
    minDate: dateToday
});

$("#calldate").datepicker({
    dateFormat: 'd MM yy',
    showOtherMonths: true,
    selectOtherMonths: true,
    maxDate: dateToday
});

我希望这是有道理的，有人可以帮我排序，谢谢

Answer 1

当您在要应用 more/different 选项的元素上调用 .datepicker() 时，您可以使用 $.datepicker.setDefaults() 然后 override/add 新选项，如下所示：

$.datepicker.setDefaults({
    dateFormat: 'd MM yy',
    showOtherMonths: true,
    selectOtherMonths: true
});

$('#fromdate').datepicker();
$('#calldate').datepicker({ minDate: 0 });

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


<label>#calldate
  <input type="text" id="calldate" min='0'/>
</label>
<label>#fromdate
  <input type="text" id="fromdate"/>
</label>

更改 jQuery datepicker 中不同表单的可选日期，同时保持其他选项相同和 DRY

Change selectable dates in jQuery datepicker for different forms whilst keeping other options the same and DRY

jquery

datepicker

jquery-ui-datepicker