jQuery Datepicker - 根据选择的选项刷新可选日子 [英] jQuery Datepicker - refresh pickable days based on selected option

问题描述

我有一个选择框，用户可以选择3个不同的商店。对于商店2和3，不可能选择周末，对于商店1，您只能选择周一至周六。

以下JavaScript仅适用于在第一选择。如果您之后选择另一家商店，则会坚持旧的选择。

我试过使用 $（#datepicker）.datepicker（refresh）; 如何刷新datepicker？），但没有任何成功。我开始认为这个问题在别的地方。

Javascript：

  $（function（）{
 
 var setting，currentShop = 0; 
 
 / *选择框* / 
 
 $（'select＃shop'）。change（function（）{
（currentShop = $（this）.val（）== 1）？loadDatePicker（setting ='noSunday'）：loadDatePicker ='noWeekends'）; 
}）; 
 
 / * Datepicker * / 
 
函数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 （设置=='noSunday'）{
 $（#datepicker）.datepicker（{beforeShowDay：noSunday，minDate：+2，maxDate：+ 1M}）; 
} 
 $（#datepicker）.datepicker（refresh）; 
 } 
}）; 
  

HTML：

 < select id =shopname =shop> 
< option value =0selected =selected>选择一个店铺< / option> 
< option value =1> 1（封闭星期日）< / option> 
< option value =2> 2（封闭周末）< / option> 
< option value =3> 3（封闭周末）< / option> 
< / select> 
< label for =datepicker> Datepicker< / label>< input type =textname =dateid =datepickervalue =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（设置=='noSunday'）{
 $（#datepicker）.datepicker（{beforeShowDay：noSunday，minDate：+2，maxDate：+ 1M }）; 
} 
 $（#datepicker）.datepicker（refresh）; 
} 
  

您需要将 $（＃datepicker ）.datepicker（destroy）; 每次更改设置之前...

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.

The following javascript only works on the first pick. If you choose another shop right after, it will stick with the old options.

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?

解决方案

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...

这篇关于jQuery Datepicker - 根据选择的选项刷新可选日子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！