使用单选按钮禁用日期 (JQUERY)答案

【问题标题】：Disable dates with the use of radio buttons (JQUERY)使用单选按钮禁用日期 (JQUERY)
【发布时间】：2020-10-11 17:27:15
【问题描述】：

我希望能够根据某些单选按钮操作日期选择器显示的可用日期。我有 3 个单选按钮

HTML

<div id = "date">
<label><input type = "radio" name = "pickDate" value = "1" >bob</label>
<label><input type = "radio" name = "pickDate" value = "2" >lucy</label>
<label><input type = "radio" name = "pickDate" value = "3" >dan</label>
</div>

当点击 bob 时，我希望星期一和星期二是唯一可用的日期当点击露西时，我希望星期三和星期四是唯一可用的日期当点击 Dan 时，我希望只有星期五有空

datePicker 的 HTML 代码

<p>Date: <input type="text" id="datepicker"></p>

我尝试使用 Jquery 来实现这一点，但我面临的问题是，当单击一个单选按钮时，它会正确显示可用日期，但是当我单击另一个按钮时，日期不会更新。我做错了什么？

$(document).ready(function () {
  $('#date input:radio').click(function () {
    if ($(this).val() === '1') {
      $('#date').datepicker({
        beforeShowDay: function (date) {
          var day = date.getDay()
          return [day != 0 && day != 6 && day != 5 && day != 3 && day != 4, '']
        },
      })
    } else if ($(this).val() === '2') {
      $('#date').datepicker({
        beforeShowDay: function (date) {
          var day = date.getDay()
          return [day != 0 && day != 6 && day != 1 && day != 5 && day != 2, '']
        },
      })
    }
  })
})

在注意到 JQUERY 没有更新后，我没有完成它

【问题讨论】：

你在使用引导日期选择器吗？
JQUERY 日期选择器
你能给出那个库的名字吗？
api.jqueryui.com/datepicker

标签： javascript html jquery twitter-bootstrap datepicker

【解决方案1】：

希望以下内容对您有所帮助

HTML

    <div id = "date">
<label><input type = "radio" name = "pickDate" value = "1" checked>bob</label>
<label><input type = "radio" name = "pickDate" value = "2" >lucy</label>
<label><input type = "radio" name = "pickDate" value = "3" >dan</label>
</div>
<p>Date: <input type="text" id="datepicker"></p>

脚本

var pickdate = 1;

$('input[type="radio"]').on('change',function(){
    pickdate  = $(this).val();
});

$( "#datepicker" ).datepicker({ beforeShowDay:
      function(dt)
      { 
        if(pickdate ==1)
            return [dt.getDay() == 0 , "" ];
        else if(pickdate ==2)
            return [dt.getDay() == 1 , "" ];
        else 
            return [dt.getDay() == 2 , "" ];
      }}
);

https://jsfiddle.net/crpwjtav/

【讨论】：