jQuery datepicker- 2 个输入/文本框和限制范围

Question

我使用带有两个输入框的 jQuery Datepicker 小部件，一个用于“从” 日期，第二个用于“到” 日期。我正在使用jQuery Datepicker functional demo作为让两个输入框相互协作的基础，但我需要能够添加这些额外的限制:

1. 日期范围不能早于2008 年 12 月 1 日

2. “截止”日期可以是没有 比今天晚

3. 一次“起始”日期 选择后，“截止”日期只能 在 7 天后的范围内 “开始”日期

4. 如果“截止”日期是 首先选择，然后选择“起始”日期 只能在7的范围内 “截止”日期之前的天数(带有 12 月 1 日为第一个限制 可选择日期)

我似乎无法让上述所有内容一起工作。

总之，我希望能够选择从 12 月 1 日到今天之间最多 7 天的范围(我意识到我是在 12 月 1 日发布此内容，所以暂时只能选择今天)。

到目前为止我的代码

$(function () {

$('#txtStartDate, #txtEndDate').datepicker(
            {
            showOn: "both",
            beforeShow: customRange,
            dateFormat: "dd M yy",
            firstDay: 1, 
            changeFirstDay: false
            });
});

function customRange(input) 
{ 

return {
         minDate: (input.id == "txtStartDate" ? new Date(2008, 12 - 1, 1) : null),
         minDate: (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate") : null), 
         maxDate: (input.id == "txtStartDate" ? $("#txtEndDate").datepicker("getDate") : null)
       }; 
}

我缺少 7 天范围限制，并且还阻止在 2008 年 12 月 1 日之前或今天之后选择“截止”日期。任何帮助将不胜感激，谢谢。

Answer 1

非常感谢您的帮助，本，我在您的帖子的基础上提出了这个。现在已经完成并且运行良好!

这是一个 Working Demo 。将 /edit 添加到 URL 以查看代码

下面的完整代码-

$(function () 
{   
    $('#txtStartDate, #txtEndDate').datepicker({
        showOn: "both",
        beforeShow: customRange,
        dateFormat: "dd M yy",
        firstDay: 1, 
        changeFirstDay: false
    });

});

function customRange(input) { 
    var min = new Date(2008, 11 - 1, 1), //Set this to your absolute minimum date
        dateMin = min,
        dateMax = null,
        dayRange = 6; // Set this to the range of days you want to restrict to

    if (input.id === "txtStartDate") {
        if ($("#txtEndDate").datepicker("getDate") != null) {
            dateMax = $("#txtEndDate").datepicker("getDate");
            dateMin = $("#txtEndDate").datepicker("getDate");
            dateMin.setDate(dateMin.getDate() - dayRange);
            if (dateMin < min) {
                dateMin = min;
            }
        }
        else {
            dateMax = new Date; //Set this to your absolute maximum date
        }                      
    }
    else if (input.id === "txtEndDate") {
        dateMax = new Date; //Set this to your absolute maximum date
        if ($("#txtStartDate").datepicker("getDate") != null) {
            dateMin = $("#txtStartDate").datepicker("getDate");
            var rangeMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + dayRange);

            if(rangeMax < dateMax) {
                dateMax = rangeMax; 
            }
        }
    }
    return {
        minDate: dateMin, 
        maxDate: dateMax
    };     
}