53

我正在使用带有两个输入框的 jQuery Datepicker 小部件，一个用于“From”日期，第二个用于“To”日期。我使用jQuery Datepicker 功能演示作为让两个输入框相互配合的基础，但我需要能够添加这些额外的限制：

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

  2. “到”日期不能迟于今天

  3. 选择“开始”日期后，“结束”日期只能在“开始”日期之后的 7 天范围内

  4. 如果先选择“To”日期，则“From”日期只能在“To”日期前 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 日之前或今天之后的“到”日期选择。任何帮助将不胜感激，谢谢。

4

8 回答 8

49

非常感谢您的帮助 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
    };     
}
于 2008-12-02T10:35:37.430 回答
15

我意识到我参加聚会有点晚了，但这是我修改工作示例代码的方式。我不需要设置具体的最大和最小日期，只是不想日期范围重叠，所以我只是让它们相互设置：

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

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

似乎做我需要的事情:)

有关我的示例，请参见此处。

于 2010-06-10T15:26:55.577 回答
14

好吧，这个怎么样：

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

}

这是我能想到的最好的满足你所有要求的（我认为......）

于 2008-12-01T21:18:21.313 回答
4

考虑使用 rangeSelect 来拥有一个控件而不是两个控件。

为了实现您的目标，我想您需要添加一个 onSelect 侦听器，然后调用datepicker( "option", settings )以更改设置。

于 2008-12-01T13:37:52.197 回答
4

您的 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，我会得到一个可选择的日期范围，即我选择的日期加上下一个日期。

于 2008-12-01T14:30:13.527 回答
4

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


$("#startdate").datepicker({
   minDate: '+5', 
   maxDate: '+3M',
   changeMonth: true,
   showAnim: 'blind',
   onSelect: function(dateText, inst){ 

    // Capture the Date from User Selection
    var oldDate = new Date(dateText);
    var newDate = new Date(dateText);

    // Compute the Future Limiting Date
    newDate.setDate(newDate.getDate()+5);


    // Set the Widget Properties
    $("#enddate").datepicker('option', 'minDate', oldDate);
    $("#enddate").datepicker('option', 'maxDate', newDate);

    }
  });

 $("#enddate").datepicker({
  minDate: '+5',
  maxDate: '+3M',
  changeMonth: true,
  showAnim: 'blind', 
  onSelect: function(dateText, inst){ 

    // Capture the Date from User Selection
    var endDate = new Date(dateText);
    var startDate = new Date(dateText);

    // Compute the Future Limiting Date
    startDate.setDate(startDate.getDate()-5);

    // Set the Widget Properties
    $("#startdate").datepicker('option', 'minDate', startDate);
    $("#startdate").datepicker('option', 'maxDate', endDate);

    }

  });
于 2010-10-01T22:40:31.550 回答
3

这就是我使用它的方式：

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)
    };
}
于 2010-02-16T09:13:55.697 回答
0

我就是这样做的。我从 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

注意：您还需要一个选项来重置/清除日期（即，如果用户选择“起始日期”，则“截止日期”会受到限制。如果用户现在选择“截止日期”，则在选择“起始日期”后'，起始日期也受到限制。您需要有一个明确的选项以允许用户现在选择不同的“起始”日期。）

于 2012-03-13T08:42:31.397 回答