我已经使用jQuery Ui日期选择器创建了日期范围选择Start Date
和End Date
。
我已进行验证,以防止End Date
小于Start Date
。
代码如下:
<input type="text" name="start_date" class="start_date form-control" required readonly>
<input type="text" name="end_date" class="end_date form-control" required readonly>
<script>
$(function () {
var startDate = "2018-11-20", // some start date
endDate = "2018-11-21", // some end date
dateRange = []; // array to hold the range
// populate the array
for (var d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)) {
dateRange.push($.datepicker.formatDate('yy-mm-dd', d));
}
$('.start_date').datepicker({
dateFormat : 'yy-mm-dd',
minDate: 2,
beforeShowDay: function (date) {
var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [dateRange.indexOf(dateString) == -1];
},
onSelect: function( selectedDate )
{
$( ".end_date" ).datepicker( "option", "minDate", selectedDate, {
beforeShowDay: function (date) {
var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [dateRange.indexOf(dateString) == -1];
}
} );
}
});
$('.end_date').datepicker({
dateFormat : 'yy-mm-dd',
minDate: 2,
beforeShowDay: function (date) {
var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [dateRange.indexOf(dateString) == -1];
},
onSelect: function( selectedDate )
{
$( ".start_date" ).datepicker( "option", "maxDate", selectedDate, {
beforeShowDay: function (date) {
var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [dateRange.indexOf(dateString) == -1];
}
} );
}
});
});
</script>
结果如下:
我想防止用户选择已经禁用日期的日期范围,所以;用户已禁用19
和22
,因此无法在20
至21
之间进行选择。
有可能吗?