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

Posted 2023-05-08

【中文标题】使用单选按钮禁用日期 (JQUERY)

【英文标题】：Disable dates with the use of radio buttons (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

【参考方案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/