我正在使用daterangepicker选择日期范围。一旦范围之间存在无效日期,就不应再将它们移到另一个日期。
类似于this question的事物,但是它使用Bootstrap daterangepicker,而我正在使用DateRangePicker
var dateRanges = [{
'start': moment('2019-06-28'),
'end': moment('2019-07-5')
},
];
$('input[name="daterange"]').daterangepicker({
autoUpdateInput: false,
autoApply: true,
opens: 'left',
setStartDate: new Date(),
minDate: moment().startOf('day').add(2, 'day'),
locale: {
"format": "DD/MM/YYYY",
},
isInvalidDate: function(date) {
return dateRanges.reduce(function(bool, range) {
return bool || (date >= range.start && date <= range.end);
}, false);
},
});
$('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format(
'DD/MM/YYYY'));
})
input {
width: 400px;
height: 50px;
}
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<input type="text" name="daterange" readonly="true" readonly value="">