jQuery Datepicker-根据所选选项刷新可选择的天数

jQuery Datepicker - refresh pickable days based on selected option

本文关键字：可选择 刷新 选项 Datepicker- jQuery      更新时间：2023-09-26

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

以下javascript仅适用于第一个pick。如果你马上选择另一家商店，它会坚持旧的选择。

我尝试过使用$( "#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" />

Js文件：http://jsbin.com/ajavek/1/edit

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

请参阅：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");。。。

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

清除datepicker的上线工作。

$("#datepicker"(.datepicker("destroy"(；

相关文章：