在日期选择器中突出显示禁用日答案

【问题标题】：Highlight disabled day in datepicker在日期选择器中突出显示禁用日
【发布时间】：2020-09-23 09:49:43
【问题描述】：

我需要从日期选择器中突出显示禁用的日期

我现在是这样的

唯一可用的一天是星期二，所以我想强调禁用日

这是我的javascript

<script>
    var idf = '';
    var hari = '';
    $('.divradio').hide();
    $(".divradio input").prop('disabled','disabled');
    function getIndex(data, id) {
            var date = $('#' + data).datepicker('getDate');
            var dayOfWeek = date.getDay();
            $('.divradio').hide();
            $(".radio" + idf + hari + " input").prop('checked', false);
            // $(".radio" + idf + hari + " input").attr('disabled','disabled');
            $('.radio' + id + dayOfWeek).show();
            $(".radio" + id + dayOfWeek + " input").removeAttr('disabled');
            idf = id;
            hari = dayOfWeek;
            // console.log(".radio" + idf + hari + " input");
        };
</script>

我应该怎么做才能做到这一点？

【问题讨论】：

在编辑器中按<>，使用 sn-p 使用示例数据制作minimal reproducible example。您可以使用示例源代码中的链接加载日期选择器：jqueryui.com/datepicker，图片没有帮助。简短回答：循环日行，如果一列中的所有内容都被禁用，则目标标题行并突出显示...

标签： javascript jquery-ui datepicker

【解决方案1】：

借助 jQuery UI，您可以使用带 CSS 的主题来完成此操作。请考虑以下示例。

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

.ui-datepicker-calendar .ui-datepicker-unselectable span {
  background-color: yellow;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>


Date:
<div id="datepicker"></div>

【讨论】：