javascript - jQueryDatepicker-選択したオプションに基づいて選択可能な日を更新します

Question

ユーザーが3つの異なるショップを選択できる選択ボックスがあります。ショップ2と3の週末を選択することはできません。また、ショップ1の場合は、月曜日から土曜日までしか選択できません。

次のJavaScriptは、最初の選択でのみ機能します。すぐに別のショップを選択した場合、それは古いオプションに固執します。

使用してみましたが（ datepickerを更新する方法を$( "#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

datepickerを使用して設定を正しく更新/適用するにはどうすればよいですか？

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");設定を変更する前に毎回置く必要があります...

Answer 2

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

上記の行は、をクリアするために機能しdatepickerます。

Answer 3

$（ "＃datepicker"）。datepicker（ "destroy"）;