Question

我刚刚安装了amsul日期选择器，但无法弄清楚如何禁用日期？例如，如果我希望日历显示直到1年的今天和将来的日期。例如：2019年5月2日-> 2020年5月2日。我要禁用以前的所有日期。

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

谢谢。

// 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

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

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

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

1 个答案: