jQuery Datepicker - 根据所选选项刷新可选日期
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/15296463/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Datepicker - refresh pickable days based on selected option
提问by estrar
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.
我有一个选择框,用户可以在其中选择 3 个不同的商店。应该不可能为商店 2 和 3 选择周末,而对于商店 1,您应该只能选择周一至周六。
The following javascript only works on the first pick. If you choose another shop right after, it will stick with the old options.
以下 javascript 仅适用于第一个选择。如果您之后立即选择另一家商店,它将坚持使用旧选项。
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.
我试过使用$( "#datepicker" ).datepicker("refresh");
(查看如何刷新日期选择器?)但没有任何成功。我开始认为问题出在其他地方。
Javascript:
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:
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
Jsfiddle:http://jsbin.com/ajavek/1/edit
How do I refresh/apply the settings correctly with datepicker?
如何使用日期选择器正确刷新/应用设置?
回答by Anujith
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");
}
You need to put $("#datepicker").datepicker("destroy");
each time before changing settings...
您需要$("#datepicker").datepicker("destroy");
在更改设置之前每次放置...
回答by Atik Fahm
$("#datepicker").datepicker("destroy");
Above line work for clearing the datepicker
.
上面的行用于清除datepicker
.
回答by Devendra
$("#datepicker").datepicker("destroy");
$("#datepicker").datepicker("destroy");