具有自定義動態日期范圍的jQuery UI datepicker

Question

我在使用CodeIgniter開發的應用程序之一中使用jQuery UI datepicker插件。 它們按我期望的方式工作正常。

現在，我正在處理一個新表單，在該表單中我需要為datepicker字段定義一個自定義日期范圍，用戶可以從中選擇一個日期。 到目前為止，當用戶使用表單時，它會顯示“年份”下拉字段。 一旦用戶從下拉菜單中選擇了一年，我的功能便是向表單添加了一些新字段。 所以一個字段是Date Applied ，這是一個文本字段，在這里我正在初始化jQuery UI datepicker，當用戶關注該字段時它顯示了datepicker。

所以這是我到目前為止所做的。 現在讓我解釋一下這個問題。 根據從第一步開始的用戶年份選擇，我想限制“ Date Applied選擇。 如果用戶選擇2014那么我要允許用戶選擇1 Oct, 2014至30 Sep, 2015 。 因此， month范圍將始終是1 Oct 30 Sep 1 Oct至30 Sep 1 Oct 30 Sep而年份將被selected year ，即selected year + 1 。

其他示例：

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

請讓我知道是否有人可以幫助我如何在jQuery UI datepicker中設置這些自定義動態日期范圍。

Answer 1

如在本示例中的datepicker關閉事件上，設置新的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是我從用戶選擇的年份值中收到的值。