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

Posted 2023-05-07

【中文标题】jQuery Datepicker - 根据所选选项刷新可选择的日期

【英文标题】：jQuery Datepicker - refresh pickable days based on selected option

【发布时间】：2013-02-24 03:26:09

【问题描述】：

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

以下 javascript 仅适用于第一个选择。如果您之后立即选择另一家商店，它将坚持使用旧选项。

我尝试过使用$( "#datepicker" ).datepicker("refresh");（参见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 正确刷新/应用设置？

【参考方案1】：

看到这个：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");...

【讨论】：

看起来像一个解决方案。虽然每次都破坏它感觉有点奇怪，但对于这个小项目我想还可以。

【参考方案2】：

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

清除datepicker 的一线工作。

【参考方案3】：

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

【讨论】：

请添加解释，以避开低质量的子弹。