Question

我有两个Jquery日期选择器，可以选择一系列日期。

我已经实现了某些限制，例如textbox2的日期应该始终大于textbox1。此外，我已禁用某些日期。

我需要的是，如果用户从日期中选择，然后选择日期，如果中间存在禁用日期，则用户不应该选择该范围。

例如：

我已停用日期："31-5-2014", "1-6-2014", "2-6-2014"

如果用户选择date1为 29-5-2014 ，并尝试选择 4-6-2014 作为第二个日期，那么他应该无法做到因为禁用日期在下方。 date2的最大值必须为 30-5-2014

Answer 1

我在您的代码中添加了一个函数“validateDateRange”，以说明完成此任务所需的逻辑。请注意，我添加的功能的目的是在您描述的条件发生时简单地弹出警报。从这里你应该能够做任何你喜欢的事情。如果您有更多问题或正在寻找其他问题，请告诉我们。

Here are my updates

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;
        }
    }
}

Answer 2

如果jQuery UI Datepicker不支持此类功能，那么手动方式就是未来。

您可以在start_date 日期选择器中使用日期选择器的onSelect选项来实现此功能。

   $('#start_date').datepicker(
   {
       beforeShow: customRangeStart,
       beforeShowDay: unavailable,
       minDate: 0,
       dateFormat: "yy-mm-dd",
       changeYear: true,
       onSelect: function() {
           //Do validation functionality here
           triggerOnStartSelect();
        }
   });

并记下用于设置maxDate日期选择器的新end_date的验证功能：

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

在初始化日期字符串数组之后调用。

查看此Demo Fiddle

在解决这个问题的过程中，我找到了一个可以用来解决这个问题的有趣问题（可能）：

JQuery Datepicker find next disabled date

Answer 3

    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);
    }

如何防止选择两者之间有禁用日期的日期范围？

3 个答案:

查看此Demo Fiddle