根据选择在jQuery日期选择器中禁用日期

时间:2015-10-02 14:58:39

标签: javascript jquery datepicker

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

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

我有另一个选择字段,周一和周三名为Days,代码为:

<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 个答案:

答案 0 :(得分:0)

以下代码可以完成工作:

标记

<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