javascript - Amsul DatePicker - 如何禁用日历上的日期？

Question

我刚刚安装了 amsul 日期选择器，但我不知道如何禁用日期？例如，如果我希望日历显示今天的日期和 future 1 年的日期。例如:2019 年 5 月 2 日 -> 2020 年 5 月 2 日。我想禁用所有以前的日期。

此外，我正在尝试构建一个从 -> 到日期选择器，因此例如，如果用户在 from 输入中选择 2019 年 5 月 3 日，他/她应该只被允许选择从 2019 年 5 月 3 日到 5 月 3 日的日期2020 在“to”输入中。

谢谢。

阿姆苏尔:https://amsul.ca/pickadate.js/

// DatePicker
var dPicker;
var initialDateSet = false;
var backup = "";

$('.datepickerCheckin').pickadate({
onSet: function() {
if (!initialDateSet) {
  $('.timepickerCheckin').click();
} else {
  var tempString = dPicker.get();
  var tempString2 = backup.substr(backup.indexOf("at"), backup.length);
  $('.datepickerCheckin').val(tempString + " " + tempString2);
  backup = $('.datepickerCheckin').val();
}

},
onOpen: function() {
dPicker = this;
if (initialDateSet) {
  var index = $('.datepickerCheckin').val().indexOf("at");
  if ($('.datepickerCheckin')[0].selectionStart > index) {
    dPicker.close(true);
    $('.timepickerCheckin').click();
  }

}
},
format: 'dd mmm, yyyy',
today: '',
clear: '',
close: '',
});

// TimePicker
$('.timepickerCheckin').pickatime({
onSet: function() {
var tempString;
if (!initialDateSet) {
  tempString = $('.datepickerCheckin').val() + " at " + 
$('.timepickerCheckin').val();
  $('.datepickerCheckin').val(tempString);
  backup = tempString;
  initialDateSet = true;
} else {
  tempString = backup.substr(0, backup.indexOf("at"));
  $('.datepickerCheckin').val(tempString + "at " + 
$('.timepickerCheckin').val());
  backup = $('.datepickerCheckin').val();
}
},
clear: '',
format: 'HH:i'
})

// DatePicker Checkout
$('.datepickerCheckout').pickadate({
onSet: function() {
$('.timepickerCheckout').click();
},
format: 'dd mmm, yyyy',
today: '',
clear: '',
close: '',
});

// TimePicker Checkout
$('.timepickerCheckout').pickatime({
onSet: function() {
var tempString = $('.datepickerCheckout').val() + " at " + 
$('.timepickerCheckout').val();
$('.datepickerCheckout').val(tempString);
},
clear: '',
format: 'HH:i'
   })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>
<label>from</label>
<input type="text" class="datepickerCheckin">
<label>to</label>
<input type="text" class="datepickerCheckout">

Answer 1

根据您提供的文档，您可以使用 min max 选项设置日期范围。即。

$('.datepicker').pickadate({
    weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    min: new Date(2015,3,20),
    max: new Date(2015,7,14)
 })