jQuery日期选择器-2个输入/文本框和限制范围

我使用的jQuery Datepicker小部件有两个输入框，一个用于“From”日期的，第二个用于“To”日期的。我使用作为使两个输入框相互工作的基础，但我需要能够添加以下附加限制：

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

“到”日期可以是否 迟于今天

从日期开始一次 如果选中，则只能选择“到”日期 在之后的7天内 从日期开始的日期

如果一个“到”日期是 首先选择，然后选择从日期开始的日期 只能在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日之前或今天之后选择日期。非常感谢您的帮助。

请考虑使用rangeSelect使一个控件而不是两个控件

---

为了实现您的目标，我想您需要添加一个onSelect侦听器，然后调用

日期选择器（“option”，settings）

来更改设置。

txtStartDate的开始日期不起作用，因为您的第二个minDate在第二次检查input.id时被设置为null。此外，maxDate应该检查txtEndDate，而不是txtStartDate。试试这个：

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

---

我不知道为什么用“+5”而不是“+7”，但是如果我加上0，我会得到一个可选择的日期范围，即我选择的日期加上下一天。

好的，这个怎么样：

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

}

功能自定义范围（输入）
{ 
var min=新日期（2008年12月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）；
如果（日期分钟<分钟）
{
dateMin=min；
}           
}
else if（input.id==“txtEndDate”）
{
dateMax=新日期（）；
if（$（“#txtStartDate”）.datepicker（“getDate”）！=null）
{
dateMin=$（“#txtStartDate”）.datepicker（“getDate”）；
dateMax=$（“#txtStartDate”）.datepicker（“getDate”）；
dateMax.setDate（dateMax.getDate（）+7）；
}
}
返回{
minDate:dateMin，
maxDate:dateMax
}; 
}

---

这是我能想到的最好的满足你所有要求的方法（我想…

非常感谢你的帮助Ben，我在你的帖子的基础上提出了这个。它现在已经完成，并且工作得非常出色

这里有一个。将/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
    };     
}

$（函数（）
{   
$（'#txtStartDate，#txtEndDate'）。日期选择器({
showOn:“两者”，
展会前：定制范围，
日期格式：“dd M yy”，
第一天：1，
第一天：假
});
});
函数自定义范围（输入）{
var min=newdate（2008，11-1，1），//将其设置为您的绝对最小日期
dateMin=min，
dateMax=null，
dayRange=6；//将其设置为要限制的天数范围
如果（input.id==“txtStartDate”）{
if（$（“#txtEndDate”）.datepicker（“getDate”）！=null）{
dateMax=$（“#txtEndDate”）.datepicker（“getDate”）；
dateMin=$（“#txtEndDate”）.datepicker（“getDate”）；
dateMin.setDate（dateMin.getDate（）-dayRange）；
如果（日期分钟<分钟）{
dateMin=min；
}
}
否则{
dateMax=new Date；//将其设置为您的绝对最长日期
}                      
}
else if（input.id==“txtEndDate”）{
dateMax=new Date；//将其设置为您的绝对最长日期
if（$（“#txtStartDate”）.datepicker（“getDate”）！=null）{
dateMin=$（“#txtStartDate”）.datepicker（“getDate”）；
var rangeMax=new Date（dateMin.getFullYear（）、dateMin.getMonth（）、dateMin.getDate（）+dayRange）；
如果（范围最大值<日期最大值）{
dateMax=rangeMax；
}
}
}
返回{
minDate:dateMin，
maxDate:dateMax
};     
}

我就是这样使用它的：

function customRange(input)
{
    var min = new Date();
    return {
        minDate: ((input.id == "txtStartDate") ? min : (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate") : null)),
        maxDate: (input.id == "txtStartDate" ? $("#txtEndDate").datepicker("getDate") : null)
    };
}

---

我意识到我参加聚会有点晚了，但下面是我如何修改工作示例代码的。我不需要设置特定的最大和最小日期，只是不希望日期范围重叠，所以我让它们相互设置：

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

（我的日期选择器已经在更高的脚本中初始化，但这只是默认设置。）

似乎做了我需要的事情：）

---

请参阅我的示例。

这是我在为解决我认为常见的问题进行了大量挖掘之后提出的一个解决方案。这有效地“反弹”了在兼容天数的共享输入范围内的输入。意思-如果我有两个字段，其中一个可以用来约束另一个，另一个可以在必要时重新定义原始字段。这样做的目的是始终确保两个字段之间只有有限的天数（或月或其他时间）。此特定示例还限制了未来在任一字段中选择某项内容的时间（例如3个月）

---

我就是这样做的。我从jQueryUI网站获取了源代码，并对其进行了修改以添加您的约束

$(document).ready(function ()
{      
  var dates = $('#StartDate, #EndDate').datepicker({
        minDate: new Date(2008, 11, 1), 
        maxDate: "+0D",
        dateFormat: "dd M yy",
        changeMonth: true,
        changeYear: true,
        onSelect: function (selectedDate)
        {
            var option = this.id == "StartDate" ? "minDate" : "maxDate",
                instance = $(this).data("datepicker"),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings);
            var edate;
            var otherOption;
            var d;
            if (option == "minDate")
            {
                otherOption = "maxDate";
                d = date.getDate() + 7;
            }
            else if (option == "maxDate")
            {
                otherOption = "minDate";
                d = date.getDate() - 7;
            }

            var m = date.getMonth();
            var y = date.getFullYear();
            edate = new Date(y, m, d);

            dates.not(this).datepicker("option", option, date);
            dates.not(this).datepicker("option", otherOption, edate);
        }
    });
});

最初想法来自：

N

$(document).ready(function ()
{      
  var dates = $('#StartDate, #EndDate').datepicker({
        minDate: new Date(2008, 11, 1), 
        maxDate: "+0D",
        dateFormat: "dd M yy",
        changeMonth: true,
        changeYear: true,
        onSelect: function (selectedDate)
        {
            var option = this.id == "StartDate" ? "minDate" : "maxDate",
                instance = $(this).data("datepicker"),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings);
            var edate;
            var otherOption;
            var d;
            if (option == "minDate")
            {
                otherOption = "maxDate";
                d = date.getDate() + 7;
            }
            else if (option == "maxDate")
            {
                otherOption = "minDate";
                d = date.getDate() - 7;
            }

            var m = date.getMonth();
            var y = date.getFullYear();
            edate = new Date(y, m, d);

            dates.not(this).datepicker("option", option, date);
            dates.not(this).datepicker("option", otherOption, edate);
        }
    });
});