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

- Russ Cam

---

这里有一篇很好的文章，附有示例：使用jQuery日期选择器，结束日期不应早于开始日期。 - informatik01

Answer 1

非常感谢您的帮助Ben，我在您的帖子基础上进行了改进，现在已经完成并且运行得非常好！

这里是一个演示链接，在URL后面添加/edit可以查看代码。

完整代码如下-

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

- Russ Cam

---

太棒了！帮了我很多忙！ - Emma

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

我的日期选择器已经在之前的脚本中初始化过了，但只使用了默认设置。

看起来它做到了我需要的功能 :)

请参见这里获取我的示例。

- Robin Duckett

---

太好了，正是我想要的 ;) - Paranoid Android

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

}

这是我所能想到的最好的方案，符合您的所有要求（我想是这样...）

- Ben Koehler

Answer 4

考虑使用 rangeSelect ，只需一个控件即可实现两个控件的功能。

为了达到你想要的效果，我想你需要添加一个 onSelect 监听器，然后调用 datepicker( "option", settings ) 来更改设置。

- kgiannakakis

---

使用一个控件是一种可能性，尽管我更喜欢尝试将“从”和“到”日期保留在单独的控件中，以保持当前用户界面的一致性。 - Russ Cam

Answer 5

这是我经过长时间挖掘后想出的解决方案，它可以有效地“弹回”输入到兼容日期范围内。这意味着如果我有两个字段，任何一个都可以用来约束另一个，另一个也可以重新定义原始值（如果需要）。其目的是始终确保两个字段之间只有有限的天数（或月份等）。此特定示例还限制了可以在任一字段中选择的未来时间量（例如3个月）。

$("#startdate").datepicker({
   minDate: '+5', 
   maxDate: '+3M',
   changeMonth: true,
   showAnim: 'blind',
   onSelect: function(dateText, inst){
// 从用户选择中捕获日期
    var oldDate = new Date(dateText);
    var newDate = new Date(dateText);
// 计算未来限制日期
    newDate.setDate(newDate.getDate()+5);
// 设置小部件属性
    $("#enddate").datepicker('option', 'minDate', oldDate);
    $("#enddate").datepicker('option', 'maxDate', newDate);
}
  });
 $("#enddate").datepicker({
  minDate: '+5',
  maxDate: '+3M',
  changeMonth: true,
  showAnim: 'blind', 
  onSelect: function(dateText, inst){
// 从用户选择中捕获日期
    var endDate = new Date(dateText);
    var startDate = new Date(dateText);
// 计算未来限制日期
    startDate.setDate(startDate.getDate()-5);
// 设置小部件属性
    $("#startdate").datepicker('option', 'minDate', startDate);
    $("#startdate").datepicker('option', 'maxDate', endDate);
}
});

- David Bigelow

Answer 6

你的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，我会得到我选择的日期范围以及接下来的一天。

- Ben Koehler

---

这解决了从“起始”日期到“结束”日期的可选择范围为7天，但如果在选择“起始”日期之前选择“结束”日期，则会出现错误。 - Russ Cam

是的，我在第一次回答中错过了你的一些要求。请查看我的其他答案。 - Ben Koehler

Answer 7

这是我使用它的方法：

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

- gaby

Answer 8

这是我的做法。我从Jquery UI网站获取了源代码，并进行了修改以添加您的限制条件。

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

初始想法来自：http://jqueryui.com/demos/datepicker/#date-range

注意：您还需要一个重置/清除日期的选项（即，如果用户选择了“从日期”，则“到日期”变得有限。在选择“从日期”后，如果用户现在选择了“到日期”，则“从日期”也会受到限制。您需要有一个清除选项，以允许用户现在选择不同的“从”日期。）

- escist