javascript - 在 Jquery UI Datepicker 中突出显示特定日期

Question

我在这里读过其他类似的问题，但没有一个完全符合我的要求。

我想在两个日期之间的所有日子里添加一个课程。日期将在变量中设置。

有什么想法吗？

Answer 1

您需要为 datepicker 实现beforeShowDay 事件：

该函数将日期作为参数，并且必须返回一个数组，其中 [0] 等于 true/false 指示此日期是否可选，[1] 等于 CSS 类名称或默认表示为 '' , 和 [2] 此日期的可选弹出工具提示。在显示之前，它会在日期选择器中的每一天被调用。

因此，您需要执行以下操作：

$("#datepicker").datepicker({
    beforeShowDay: function(d) {
        var a = new Date(2012, 3, 10); // April 10, 2012
        var b = new Date(2012, 3, 20); // April 20, 2012
        return [true, a <= d && d <= b ? "my-class" : ""];
    }
});

演示：

$(function() {
  $("#datepicker").datepicker({
    beforeShowDay: function(d) {
      // a and b are set to today ± 5 days for demonstration
      var a = new Date();
      var b = new Date();
      a.setDate(a.getDate() - 5);
      b.setDate(b.getDate() + 5);
      return [true, a <= d && d <= b ? "my-class" : ""];
    }
  });
});

@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.min.css");

.my-class a {
  background: #FC0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<input id="datepicker">

另一个演示在这里