根据选择禁用jQuery Date Picker中的日期

Posted 2023-05-09

【中文标题】根据选择禁用jQuery Date Picker中的日期

【英文标题】：Disabling dates in jQuery Date Picker based on selection

【发布时间】：2015-12-30 20:04:12

【问题描述】：

我有一个日期选择器，它包含在以下代码中：

<input type="text" class="input-text hasDatepicker" name="myfld1" id="myfld1" placeholder="Select the delivery date" value="">

我有另一个名为 Days with Monday 和 Wednesday 的选择字段，代码如下：

<select name="myfield2" id="myfield2" class="select ">
<option value="" selected="selected">Select    below</option>
<option value="Mondays">Mondays</option>
<option value="Wednesdays">Wednesdays</option>
</select>

我试图实现的是，当周一被选中时，日期选择器只能在周一和周三类似地显示日期。

下面是我正在使用的 jQuery 代码：

 deliverydate = 
    init: function () 
        jQuery('#myfld1').datepicker("option", "minDate", +1);
        jQuery('#myfld1').datepicker("option", "beforeShowDay", this.disabledays);
    ,
    disabledays: function (date) 
        return [(date.getDay() == jQuery('#myfield2').val())];
    
;

deliverydate.init(),
        b.init(),
        c.init(),
        d.init()

【参考方案1】：

下面的代码完成了工作：

标记

<p>Date:
    <input type="text" name="myfld1" id="myfld1" placeholder="Select the delivery date" value="">
</p>
<select name="myfield2" id="myfield2">
    <option value="" selected="selected">Select below</option>
    <option value="1">Mondays</option>
    <option value="3">Wednesdays</option>
</select>

jQuery/javascript

 $(document).ready(function () 
     $('#myfld1').datepicker(
         beforeShowDay: function() 
             return [false];
         
     );
     $("#myfield2").on('change', function() 
         var showDayOn = this.value;
         $('#myfld1').datepicker('option', 'beforeShowDay', function (date) 
             return [date.getDay() == showDayOn];
         );
     );
 );

直播

Fiddle