具有自定义动态日期范围的 jQuery UI 日期选择器答案

【问题标题】：jQuery UI datepicker with custom dynamic date range具有自定义动态日期范围的 jQuery UI 日期选择器
【发布时间】：2015-11-11 06:08:01
【问题描述】：

我在使用CodeIgniter 开发的应用程序之一中使用jQuery UI datepicker 插件。它运行良好，正如我预期的那样。

现在我正在处理一个新表单，在该表单中我需要一个用户可以从中选择日期的日期选择器字段的自定义日期范围。到目前为止，当用户进入表单时，它显示了一个年份下拉字段。一旦用户从下拉列表中选择一年，我的功能就是在表单中添加一些新字段。所以一个字段是Date Applied，这是一个文本字段，我正在初始化 jQuery UI 日期选择器，当用户关注该字段时它会显示日期选择器。

这就是我到目前为止所做的。现在让我解释一下这个问题。根据从第一步开始的用户年份选择，我想限制Date Applied 选择。如果用户选择了2014，那么我想允许用户选择1 Oct, 2014 到30 Sep, 2015。所以month 范围总是1 Oct - 30 Sep 和年份将是selected year - selected year + 1。

更多示例：

2010 - 1 Oct, 2010 至 30 Sept, 2011
2015 - 1 Oct, 2015 至 30 Sept, 2016
2016 - 1 Oct, 2016 至 30 Sept, 2017

如果有人可以帮助我如何在 jQuery UI 日期选择器中设置这些自定义动态日期范围，请告诉我。

【问题讨论】：

标签： javascript jquery user-interface date datepicker

【解决方案1】：

如 this example 在 datepicker 关闭事件中设置新的 minDate 和 maxDate 值。

$("#to").datepicker({
  onClose: function(selectedDate) {
    $("#from").datepicker("option", "maxDate", selectedDate);
  }
});

【讨论】：

我只有一个字段Date Applied，我只想在该字段上设置日期选择范围。
@DeepakBiswal 你没有提供任何代码，不知道你是一个字段还是100个......
我在描述Date Applied中提到过。无论如何，我得到了答案并发布了一些。感谢您的指导！

【解决方案2】：

您可以在此处http://api.jqueryui.com/datepicker/#option-yearRange http://api.jqueryui.com/datepicker/#option-yearRange 处使用此选项设置年份范围

$( ".selector" ).datepicker({
 yearRange: "2002:2012"
 });

或

$( ".selector" ).datepicker({
 yearRange: "-50:+0"//last 50 year
});

【讨论】：

【解决方案3】：

我能够让它工作。以下是解决我的问题的代码。

var firstYear    = userYear;
var endYear      = userYear + 1;
$( ".addDatePickerTransfer" ).datepicker({
   yearRange: "'" + firstYear + ":" + endYear + "'",
   minDate: new Date(firstYear, 10 - 1, 1),
   maxDate: new Date(endYear, 9 - 1, 30)
});

注意：userYear 是值，我从用户选择的年份值中收到。

【讨论】：