datepicker:使用下拉列表禁用天数?

Posted

技术标签:

【中文标题】datepicker:使用下拉列表禁用天数?【英文标题】:datepicker : disable days using drop down list? 【发布时间】:2015-09-27 22:32:44 【问题描述】:

我有一个如下所示的下拉列表:

   <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 动态创建的。

【问题讨论】:

【参考方案1】:

你在这里:应该摧毁它。

$("#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" />

参考:How do I *completely* remove a jQuery UI datepicker?

希望这会有所帮助。

【讨论】:

再次选择 option 1 时,您必须再次销毁 datepicker【参考方案2】:

使用这个:

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

谢谢:)

【讨论】:

以上是关于datepicker:使用下拉列表禁用天数?的主要内容,如果未能解决你的问题,请参考以下文章

根据显示的数据表值禁用下拉列表项

更改下拉列表中 Datepicker 的属性更改不起作用

jQuery DatePicker:如何将年份数组传递给 yearRange 下拉列表

jQuery DatePicker:如何将年份数组传递给yearRange下拉列表

禁用下拉列表项

年份的 JQuery Datepicker 下拉列表仅显示单年