jQuery日期选择器 - 根据所选选项刷新可选日期

Question

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

下面这段 JavaScript 只对第一个选择框有效。如果您立即选择另一个商店，则仍将保留旧选项。

我尝试过使用 $( "#datepicker" ).datepicker("refresh");（请参见如何刷新日期选择器？），但没有成功。我开始认为问题可能出在其他地方。

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

如何正确地使用日期选择器进行设置的刷新/应用？

- estrar

Answer 1

查看这个：演示

  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");

- Anujith

---

看起来是个解决方案。虽然每次销毁它有点奇怪，但对于这个小项目来说，我想这还可以接受。 - estrar

Answer 2

$("#datepicker").datepicker("destroy");

上面这行代码用于清除日期选择器。

- Atik Fahm

Answer 3

$("#datepicker").datepicker("destroy");

- Devendra

---

请提供解释以避免低质量的问题。 - user1741851