我想使用自定义阻止日期设置日期范围。附加到jsFiddle的链接在这里。现在,我想限制用户选择不包括封锁日期的日期范围。在此示例中,由于无法阻止3月24日和3月25日,因此用户无法选择3月22日至3月26日。
<input type="text" class="form-control datePicker" id="dateRetrait" name="dateRetrait" />
<label><b>Checkin:</b></label> <label id="checkinDate"></label>
<label><b>Checkout:</b></label> <label id="checkoutDate"></label>
unavailableDates = ['03-24-2019', '03-25-2019'];
$("#dateRetrait").datepicker({
dateFormat: "MM d, yy",
minDate: 0,
beforeShowDay: dateRange,
onSelect: DRonSelect
});
function DRonSelect(dateText, inst) {
var date1 = $.datepicker.parseDate("MM d, yy", $("#checkinDate").text());
var date2 = $.datepicker.parseDate("MM d, yy", $("#checkoutDate").text());
if (!date1 || date2) {
$("#checkinDate").text(dateText);
$("#checkoutDate").text("");
$("#dateRetrait").datepicker();
}
else {
if ($.datepicker.parseDate("MM d, yy", $("#checkinDate").text()) >=
$.datepicker.parseDate("MM d, yy", dateText)) {
$("#checkinDate").text(dateText);
$("#checkoutDate").text("");
$("#dateRetrait").datepicker();
}
else {
$("#checkoutDate").text(dateText);
var total = $("#checkinDate").text() + "->" + $("#checkoutDate").text();
$("#dateRetrait").datepicker();
$("#dateRetrait").val(total);
}
}
}
function dateRange(date) {
//var date1 = $.datepicker.parseDate("MM d, yy", $("#checkinDate").text());
//var date2 = $.datepicker.parseDate("MM d, yy", $("#checkoutDate").text());
//var isHighlight = date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2));
// $(document).ready(function(){
// // $("td.dp-highlight").text("Y");
// });
//// return [true, isHighlight ? "dp-highlight" : ""];
var dmy = (date.getMonth() + 1);
if (date.getMonth() < 9)
dmy = "0" + dmy;
dmy += "-";
if (date.getDate() < 10) dmy += "0";
dmy += date.getDate() + "-" + date.getFullYear();
console.log(dmy + ' : ' + ($.inArray(dmy, unavailableDates)));
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, "", "Available"];
} else {
return [false, "", "unAvailable"];
}
}