帶自定義動態日期範圍的jQuery UI日期選擇器

Question

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

現在我正在處理一個新表單，我需要用戶可以從中選擇日期的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日期選擇器中設置這些自定義動態日期範圍。

Answer 1

我能夠讓它工作設置年份範圍。以下是解決我的問題的代碼。

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是我從用戶選擇的年份值中收到的值。

Answer 2

如在this example上的datepicker關閉事件設置新的minDate和maxDate值。

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

Answer 3

您可以使用此選項每文檔這裏http://api.jqueryui.com/datepicker/#option-yearRange

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

或

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