如何防止选择两者之间有禁用日期的日期范围？
我有两个Jquery日期选择器，可以选择一系列日期。
我已经实现了某些限制，例如textbox2的日期应该始终大于textbox1。 此外，我已禁用某些日期。
我需要的是，如果用户从日期中选择，然后选择日期，如果中间存在禁用日期，则用户不应该选择该范围。
例如：
我已禁用日期： "31-5-2014", "1-6-2014", "2-6-2014"
如果用户选择date1作为29-5-2014 ，并尝试选择4-6-2014作为第二个日期，那么他应该不能这样做，因为禁用日期在下面。 date2的最大值必须为30-5-2014
添加小提琴
我在您的代码中添加了一个函数“validateDateRange”来说明完成此任务所需的逻辑。 请注意，我添加的function的目的是在您描述的条件发生时简单地弹出警报。 从这里你应该能够做任何你喜欢的事情。 如果您有更多问题或正在寻找其他问题，请告诉我们。
这是我的更新
function validateDateRange() { var txtStartDate = $("#start_date"); var txtEndDate = $("#end_date"); var startDate; var endDate; var tempDate; if (txtStartDate.val() == "") return false; if (txtEndDate.val() == "") return false; startDate = new Date(txtStartDate.val()); endDate = new Date(txtEndDate.val()); for (i = 0; i < unavailableDates.length; i++) { var temp = unavailableDates[i].split("-"); tempDate = new Date(temp[2], temp[1]-1, temp[0]); if (startDate < tempDate && endDate > tempDate) { alert("Invalid Date Range"); return false; } } }
如果jQuery UI Datepicker不支持此类function，那么手动方式就是前进的方法。
您可以在start_date 日期选择 器中使用日期选择器的 onSelect选项来实现此function。
$('#start_date').datepicker( { beforeShow: customRangeStart, beforeShowDay: unavailable, minDate: 0, dateFormat: "yy-mm-dd", changeYear: true, onSelect: function() { //Do validation functionality here triggerOnStartSelect(); } });
并记下用于设置end_date日期选择器的新maxDate的validationfunction：
//Trigger upon change event of either start or end date function triggerOnStartSelect(){ var startDate = new Date($("#start_date").datepicker("getDate")); var endDate = new Date($("#end_date").datepicker("getDate")); //if required you could reset all of the default setting here // //And can also validate the date objects //Holds to be set maxdate of end_date datepicker var tempEndDate= null ; //unavailableDateObjects : Array of date objects listed as disabled $.each(unavailableDateObjects, function(i, disabledRangeDate) { if (startDate < disabledRangeDate) { tempEndDate=new Date(disabledRangeDate); //subtracts one day from the nearest disabled range date tempEndDate.setDate(tempEndDate.getDate() - 1); return false; } }); //Sets maxDate to the closest disabled date range or null . if null denotes no maxdate. $( "#end_date" ).datepicker( "option", "maxDate", tempEndDate); }
您可以从字符串数组列表中获取日期对象数组
var unavailableDates = ["31-5-2014", "1-6-2014", "2-6-2014", "3-6-2014"];
as（或者您可以直接定义类似于unavailableDates数组的日期数组对象）：
//Convert String Date List to Date object List function convertDisabledFieldToDateObject(diabledList) { var dateList = []; $.each(diabledList, function (i, singleDate) { var parsedDate = $.datepicker.parseDate("dd-mm-yy",singleDate); dateList.push(parsedDate); }); //Sort date if the diabled date sets are in jumbled order dateList.sort(function(date1, date2){ return date1 - date2; }); return dateList; }
在初始化日期字符串数组之后将调用哪个。
看看这个演示小提琴
在解决这个问题的过程中，我找到了一个可以用来解决这个问题的有趣问题（可能）：
JQuery Datepicker找到下一个禁用日期
var StartDate = $("#start_date").val(); var EndDates = $("#end_date").val(); var selectedDate = $("#selected_date").val(); //-- Start Date Convert in YMD var Sdate = StartDate.split("-"); var Syear= Sdate[2]; var Smonth= Sdate[1]; var Sday= Sdate[0]; var SYMDDate = Syear + '-' + Smonth + '-' + Sday; var newdate= new Date(SYMDDate); var StartDateStrToTime=newdate.getTime(); //-- End Date Convert in YMD var Edate = EndDates.split("-"); var Eyear= Edate[2]; var Emonth= Edate[1]; var Eday= Edate[0]; var EYMDDate = Eyear + '-' + Emonth + '-' + Eday; var newdates= new Date(EYMDDate); var EndDateStrToTime=newdates.getTime(); //-- Selected Date Convert in YMD var Cdate = selectedDate.split("-"); var Cyear= Cdate[2]; var Cmonth= Cdate[1]; var Cday= Cdate[0]; var CYMDDate = Cyear + '-' + Cmonth + '-' + Cday; var newdateses= new Date(CYMDDate); var SelectedDateStrToTime=newdateses.getTime(); if((SelectedDateStrToTime>=StartDateStrToTime) && (SelectedDateStrToTime<=EndDateStrToTime)) {} else { alert("Please Select date between "+StartDate+" to " +EndDates+"."); $("#selected_date").val(EndDates); }