日期选择器:使用下拉列表禁用日期 - datepicker : disable days using drop down list?

datepicker : disable days using drop down list?

本文关键字：日期下拉列表选择器 | 更新日期: 2023-09-27

我有一个下拉列表，看起来像这样:

   <span id="billet">
      <select id="test">
          <option value="Option1">Option1</option>
          <option value="Option2">Option2</option>
       </select>
   </span>

和这样的输入:

   <input type="text" class="datepicker" />

通过选择"option1"，我想从日期选择器中禁用周末。

通过选择"option2"，我想重新激活日期拾取器中的所有日期。

这是我的JS:

$("#billet").on('change', 'select', function() { 
    	if($('#test').val() == 'Option1') {
    		$('.datepicker').datepicker({
    			beforeShowDay: $.datepicker.noWeekends
    		});
    	}
    	else {
    		$('.datepicker').datepicker();
    	}
    });

注意:我使用"span"圈我的选择，因为这个下拉列表是由Ajax/PHP动态创建的。

给你:应该销毁它。

$("#test").change(function() {
  // remove destroy datepicker
  $('.datepicker').datepicker("destroy");
  if ($('#test').val() == 'Option1') {
    $('.datepicker').datepicker({
      beforeShowDay: $.datepicker.noWeekends
    });
  } else {
    $('.datepicker').datepicker();
  }
});
$("#test").trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<span id="billet">
      <select id="test">
          <option value="Option1">Option1</option>
          <option value="Option2">Option2</option>
       </select>
   </span>
<input type="text" class="datepicker" />

参考:我如何*完全*删除一个jQuery UI日期选择器?

Use This:

  $("#billet").on('change', function () {
                if ($('#test').val() == 'Option1') {
                    $('.datepicker').datepicker('option','beforeShowDay', $.datepicker.noWeekends);
                }
                else {
                    $('.datepicker').datepicker();
                }
            });

谢谢:)