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

Question

我使用带有两个输入框的jQuery Datepicker小部件,一个用于"From"日期,第二个用于"To"日期.我使用jQuery Datepicker功能演示作为使两个输入框相互协作的基础,但我需要能够添加这些额外的限制:

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日之前或今天之后的"To"日期选择.任何帮助将不胜感激,谢谢.

Answer 1

非常感谢你的帮助Ben,我已经建立了你的帖子,并提出了这个.它现在已经完成并且运行得非常出色!

这是一个工作演示.添加/编辑 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
    };     
}

Answer 2

我意识到我有点迟到了,但这是我修改工作示例代码的方式.我不需要设置特定的最大和最小日期,只是不希望日期范围重叠,所以我只是让它们相互设置:

jQuery(function() {
  jQuery('#calendardatetime_required_to, #calendardatetime_required_from').datepicker('option', {
    beforeShow: customRange
  });
});

function customRange(input) {
  if (input.id == 'calendardatetime_required_to') {
    return {
      minDate: jQuery('#calendardatetime_required_from').datepicker("getDate")
    };
  } else if (input.id == 'calendardatetime_required_from') {
    return {
      maxDate: jQuery('#calendardatetime_required_to').datepicker("getDate")
    };
  }
}

(我的日期选择器已经在脚本中进一步初始化,但它只是默认设置.)

似乎做我需要它:)

请看这里我的例子.

Answer 3

好吧,这个怎么样:

function customRange(input) 
{ 
    var min = new Date(2008, 12 - 1, 1);
    var dateMin = min;
    var dateMax = null;

    if (input.id == "txtStartDate" && $("#txtEndDate").datepicker("getDate") != null)
    {
        dateMax = $("#txtEndDate").datepicker("getDate");
        dateMin = $("#txtEndDate").datepicker("getDate");
        dateMin.setDate(dateMin.getDate() - 7);
        if (dateMin < min)
        {
            dateMin = min;
        }           
    }
    else if (input.id == "txtEndDate")
    {
        dateMax = new Date();
        if ($("#txtStartDate").datepicker("getDate") != null)
        {
            dateMin = $("#txtStartDate").datepicker("getDate");
            dateMax = $("#txtStartDate").datepicker("getDate");
            dateMax.setDate(dateMax.getDate() + 7); 
        }
    }
    return {
     minDate: dateMin, 
     maxDate: dateMax
   }; 

}

这是我能想到的最符合你所有要求的(我想......)