【问题标题】:datepicker : disable days using drop down list?datepicker:使用下拉列表禁用天数?
【发布时间】: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 动态创建的。

【问题讨论】:

    标签: javascript php jquery ajax datepicker


    【解决方案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();
                    }
                });
    

    谢谢:)

    【讨论】:

      猜你喜欢
      • 2012-07-13
      • 1970-01-01
      • 2016-03-19
      • 2011-07-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多