web-dev-qa-db-ja.com

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

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

次のJavaScriptは最初のピックでのみ機能します。すぐに別のショップを選択すると、古いオプションがそのまま使用されます。

私は$( "#datepicker" ).datepicker("refresh");（datepickerを更新する方法 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で設定を正しく更新/適用するにはどうすればよいですか？

javascriptjquerydatepicker
14
estrar

これを見てください：[〜＃〜] 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");を置く必要があります...

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

上の行はdatepickerをクリアするための作業です。

1
Atik Fahm

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

0
Devendra