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

jQuery UI datepicker with custom dynamic date range

我正在使用 jQuery UI datepicker plugin in one of my application developed with CodeIgniter。而且按照我预期的方式运行良好。

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

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

更多示例:

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

this example 一样,在日期选择器关闭事件中设置新的 minDatemaxDate 值。

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

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

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

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

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

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