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, 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 日期选择器中设置这些自定义动态日期范围。
与 this example 一样,在日期选择器关闭事件中设置新的 minDate
和 maxDate
值。
$("#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 是值,我从用户选择的年份值中收到。
我正在使用 jQuery UI datepicker plugin in one of my application developed with CodeIgniter。而且按照我预期的方式运行良好。
现在我正在处理一个新表单,我需要为日期选择器字段自定义日期范围,用户可以从中选择日期。到目前为止,当用户来到表单时,它会显示一个年份下拉字段。一旦用户从下拉列表中选择了一年,我的功能就是将一些新字段附加到表单中。所以一个字段是 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 日期选择器中设置这些自定义动态日期范围。
与 this example 一样,在日期选择器关闭事件中设置新的 minDate
和 maxDate
值。
$("#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 是值,我从用户选择的年份值中收到。