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文档，＆＃34; beforeShowDay＆＃34;返回一个数组，其中包含要添加到日期单元格中的CSS类名称，或者＃34;＆＃34;对于默认演示文稿＆＃34;。那个班级名称是＆＃34;关闭＆＃34;在我的例子中。那么我在CSS中加了一行：

.closed { background:red }

然而，不是将主单元着色为红色，而是在其周围放置一个小的红色边框。

这究竟是如何起作用的？

Answer 1

该课程将应用于<td>。 <a>内的<td>有另一个背景，主要隐藏<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>

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

1 个答案: