我有一个选择框,用户可以选择3个不同的商店.不应该选择2号和3号店的周末,而对于商店1,你应该只能选择周一至周六.
以下javascript仅适用于第一个选择.如果您之后选择另一家商店,它将坚持使用旧选项.
我尝试过使用$(“#datepicker”).datepicker(“refresh”); (见how to refresh datepicker?)但没有任何成功.我开始认为问题出在其他地方.
使用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
如何使用datepicker正确刷新/应用设置?
解决方法:
见: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”);每次更改设置之前…