html - 有条件地禁用 JQuery 日期选择器上的星期几？

Question

<input type="radio" id="alice" name="daysOff" value="alice">
<label for="alice">Alice</label><br>
<input type="radio" id="dave" name="daysOff" value="dave">
<label for="dave">Dave</label><br>

除了禁用周末外，如果上面的单选按钮在 Alice 上，我想禁用日历上的星期二，如果在 David 上，则禁用星期三。我应该在下面的函数中包含哪些 if 语句？

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
        $( "#datepicker" ).datepicker({
                beforeShowDay: $.datepicker.noWeekends
        });
    } );
</script>           
<p>Date: <input type="text" id="datepicker"></p>

Answer 1

给你， 天 == 0 || day == 6 是周末，2 和 3 是星期二、星期三。这些日期在 option = "2", option = "3" 行中定义。

我在显示常规 #datepicker 时遇到了一点问题，当没有选择单选按钮时，只有周末作为默认值，出于某种原因，我无法在您实际选择时切换它一个单选按钮，它一直加载默认 #datepicker(只有周末)，即使在单选按钮上读取的值正确更改，它也不会应用其他日期的更改。

所以我求助于使用 id #datepicker2 进行 2end 输入归档(也加载 2nd #datepicker2)，第一个被隐藏和禁用(有占位符和控制台日志检查)，它们都有相同的 name 因此在表单提交方面没有变化。

因此，如果您的单选按钮是强制性的(目前没有问题)，那么这里可以删除几行代码。或者只是离开它，因为所有选项都已涵盖。

我希望这对你有用。

$("#datepicker").datepicker({
    beforeShowDay: function (date) {
        var day = date.getDay();
         if ( day == 0 || day == 6) {
                return [false]
            } else {
                return [true]
            }
    }
});


$('input[type=radio][name=daysOff]').change(function () {

$('#datepicker').css("display","none").attr("disabled", true);
$('#datepicker2').css("display","block").attr("disabled", false);

if ($('#datepicker').is(':disabled')){
console.log("disabled");
}else{
console.log("not disabled");
};


if (this.value == 'alice') {
    option = "2";
    $("#datepicker2").datepicker({
    beforeShowDay: function (date) {
        var day = date.getDay();
         if (day == option || day == 0 || day == 6) {
                return [false]
            } else {
                return [true]
            }
    }
});
    }
if (this.value == 'dave') {
    option = "3";
    $("#datepicker2").datepicker({
    beforeShowDay: function (date) {
        var day = date.getDay();
         if (day == option || day == 0 || day == 6) {
                return [false]
            } else {
                return [true]
            }
    }
});
    }   
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<input type="radio" id="alice" name="daysOff" class="daysOff" value="alice">
<label for="alice">Alice</label><br>
<input type="radio" id="dave" name="daysOff" class="daysOff" value="dave">
<label for="dave">Dave</label><br>

<p>Date: 
<input type="text" id="datepicker" name="datepicker" style="display:block" placeholder="datepicker">
<input type="text" id="datepicker2" name="datepicker" style="display:none" placeholder="datepicker2" disabled>
</p>