jQuery Datepicker - 根据所选选项刷新可选日期 [英] jQuery Datepicker - refresh pickable days based on selected option
问题描述
我有一个选择框,用户可以在其中选择 3 家不同的商店.商店 2 和 3 不应该选择周末,而商店 1 应该只能选择周一至周六.
I have a select box where the user can pick 3 different shops. It shouldn't be possible to pick weekends for shop 2 and 3, and for shop 1 you should only be able to pick Mon - Sat.
以下 javascript 仅适用于第一个选择.如果您之后立即选择另一家商店,它将坚持使用旧选项.
The following javascript only works on the first pick. If you choose another shop right after, it will stick with the old options.
我试过使用 $( "#datepicker" ).datepicker("refresh");
(见 如何刷新日期选择器?)但没有任何成功.我开始认为问题出在其他地方.
I've tried using $( "#datepicker" ).datepicker("refresh");
(see how to refresh datepicker?) but without any success. I'm starting to think that the problem lies elsewhere.
Javascript:
$(function() {
var setting, currentShop = 0;
/* Select box */
$('select#shop').change(function() {
(currentShop = $(this).val() == 1) ? loadDatePicker(setting = 'noSunday') : loadDatePicker(setting = 'noWeekends');
});
/* Datepicker */
function noSunday(date){
var day = date.getDay();
return [(day > 0), ''];
}
function loadDatePicker(setting) {
if(setting == 'noWeekends') {
$( "#datepicker" ).datepicker({ beforeShowDay: $.datepicker.noWeekends, minDate: +2, maxDate: "+1M" });
}
if(setting == 'noSunday') {
$( "#datepicker" ).datepicker({ beforeShowDay: noSunday, minDate: +2, maxDate: "+1M" });
}
$( "#datepicker" ).datepicker("refresh");
}
});
HTML:
<select id="shop" name="shop">
<option value="0" selected="selected">Choose a shop</option>
<option value="1">1 (closed sundays)</option>
<option value="2">2 (closed weekends)</option>
<option value="3">3 (closed weekends)</option>
</select>
<label for="datepicker">Datepicker</label><input type="text" name="date" id="datepicker" value="" readonly="readonly" />
Jsfiddle:http://jsbin.com/ajavek/1/edit
如何使用日期选择器正确刷新/应用设置?
How do I refresh/apply the settings correctly with datepicker?
推荐答案
参见:DEMO
See this: DEMO
function loadDatePicker(setting) {
$("#datepicker").datepicker("destroy");
if(setting == 'noWeekends') {
$( "#datepicker" ).datepicker({ beforeShowDay: $.datepicker.noWeekends, minDate: +2, maxDate: "+1M" });
}
else if(setting == 'noSunday') {
$( "#datepicker" ).datepicker({ beforeShowDay: noSunday, minDate: +2, maxDate: "+1M" });
}
$( "#datepicker" ).datepicker("refresh");
}
每次更改设置之前,您都需要输入 $("#datepicker").datepicker("destroy");
...
You need to put $("#datepicker").datepicker("destroy");
each time before changing settings...
这篇关于jQuery Datepicker - 根据所选选项刷新可选日期的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!