Question

我在使用jQuery UI datepicker开发的应用程序之一中使用CodeIgniter插件。并且它按照我预期的方式正常工作。

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

所以这就是我到目前为止所做的。现在让我解释一下这个问题。根据用户年份从第一步开始选择，我想限制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 datepicker中设置这些自定义动态日期范围，请告诉我。

Answer 1

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

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

Answer 2

您可以在此处http://api.jqueryui.com/datepicker/#option-yearRange

为每个文档使用此选项设置年份范围

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

或

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

Answer 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是我从用户选择的年份值收到的值。

具有自定义动态日期范围的jQuery UI datepicker

3 个答案: