jQuery datepicker- 2个输入/文本框和限制范围 [英] jQuery datepicker- 2 inputs/textboxes and restricting range

问题描述

我正在使用带有两个输入框的jQuery Datepicker窗口小部件，一个用于From日期，另一个用To日期。我正在使用 jQuery Datepicker功能演示作为使两个输入框相互合作的基础，但是我需要添加以下附加限制：

I am using the jQuery Datepicker widget with two input boxes, one for the "From" date and the second with the "To" date. I am using the jQuery Datepicker functional demo as a basis for getting the two input boxes to work with each other, but I need to be able to add these additional restrictions:

1. 日期范围可以不早于
   2008年12月01日

1. Date range can be no earlier than 01 December 2008

到日期可以不晚于今天

"To" date can be no later than today

一旦选择了From日期
，To日期只能在
的范围内7天后
从日期

Once a "From" date is selected, the "To" date can only be within a range of 7 days after the "From" date

如果To首先选择
，然后From日期
只能在To之前的7
天的范围内日期（12月01日的
限制是第一个
可选择的日期）

If a "To" date is selected first, then the "From" date can only be within the range of 7 days before the "To" date (with the limit of 01 December being the first selectable date)

I似乎没有得到上述所有工作togeth呃。

I can't seem to get all of the above working together.

总而言之，我希望能够在12月01日至今天之间选择最多7天的时间（我意识到我在12月1日发布了所以现在只能得到今天）。

In summary, I would like to be able to select a range of up to 7 days between 01 December and today (I realise I am posting this on 1st December so will only get today for the moment).

我的代码到目前为止

$(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日或之后的至日期选择。谢谢，谢谢。

I'm missing the 7 day range restriction and also preventing a "To" date selection before 01 December 2008 or after today. Any help would be much appreciated, Thanks.

推荐答案

非常感谢您的帮助本，我已经建立在你的职位上，与此。现在已经完成并且非常出色！

Many thanks for your help Ben, I have built upon your posts and have come up with this. It is now complete and works brilliantly!

这是一个 工作演示 。将 /编辑添加到网址以查看代码

Here's a Working Demo. Add /edit to the URL to see the code

下面的完整代码

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

这篇关于jQuery datepicker- 2个输入/文本框和限制范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！