jQuery UI Datepicker - 添加一个额外的类来改变颜色

Question

我正在使用 jQuery UI Datepicker 来呈现日历。从 mySQL 数据库中绘制数据我想用不同的颜色显示一些日期。

日历放在页面上

<div id="calendar"></div>

脚本是

$(function() {
var closedDates = <?php echo json_encode($closedarray); ?>;
    function closed(date) {
        ymd = date.getFullYear() + "-" + ("0"+(date.getMonth()+1)).slice(-2) + "-" + ("0"+date.getDate()).slice(-2);

        if ($.inArray(ymd, closedDates) < 0 ) {
            return [true, "", "Available"];
        } else {
            return [true, "closed", "Closed"];
        }
    }

    $('#calendar').datepicker({
        beforeShowDay: closed, 
        dateFormat: 'dd-mm-yy',
        numberOfMonths: 4
    });
});

默认情况下，ThemeRoller 会在每个日期单元格上放置一个图像，但我不需要它，所以我简化了 CSS，只在单元格上放置一个纯色。 （我也回滚了，看看我是否在这个更改中造成了问题，但没有什么不同。）

根据 Datepicker 文档，“beforeShowDay”返回一个数组，其中包括“添加到日期单元格的 CSS 类名或默认演示文稿的“”。在我的示例中，该类名是“关闭的”。所以我在 CSS 中多加了一行：

.closed { background:red }

但是，它并没有将主单元格着色为红色，而是在其周围放置了一个小的红色边框。

这到底是怎么工作的？

Answer 1

该类将应用于<td>。 <td>里面的<a>还有另外一个背景，大多隐藏了<td>的背景。

只需将您的 CSS 选择器更改为以 <a> 为目标，如下所示：

$(function() {
  var closedDates = ["2014-11-06"];

  function closed(date) {
    ymd = date.getFullYear() + "-" + ("0" + (date.getMonth() + 1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2);
    console.log(ymd)
    if ($.inArray(ymd, closedDates) < 0) {
      return [true, "", "Available"];
    } else {
      return [true, "closed", "Closed"];
    }
  }

  $('#calendar').datepicker({
    beforeShowDay: closed,
    dateFormat: 'dd-mm-yy'
  });
});

.closed a {
  background: red !important;
}

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="calendar"></div>