jQuery UI Datepicker - 添加额外的类来更改颜色

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

日历被放置在页面上

<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 }

然而，而不是染色的主要单元的红，它只是把一个小的红色边框周围。

究竟该如何工作？

来源

2014-11-06 TrapezeArtist

该课程将应用于<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>

来源

2014-11-06 17:33:28

感谢TJ。有很奇怪的事情发生。看起来我所要做的只是修改CSS。我这样做，它不起作用。所以我通过复制并粘贴所有代码并从那里开始工作，制作了一个小测试文件。您使用的jquery-ui.css和jquery-ui.js文件根本无法使用，因此我将其替换为我自己的文件。当我第一次打开这个页面时，11月6日确实是红色的。点击其他日期，11月6日变为黄色（“今日”的颜色代码）。 6否是特例，因此我将closedDates变量更改为不同的日期。然后它根本不起作用。 – TrapezeArtist 2014-11-06 18:21:26

继续，因为我的空间不足。我认为您提供的额外CSS代码可能仅适用于“今天”，而不适用于其他任何日期。 – TrapezeArtist 2014-11-06 18:22:44

@TrapezeArtist只需用'！important'敲击默认的CSS即可。检查更新后的答案。 – 2014-11-07 06:15:05

jQuery UI Datepicker - 添加额外的类来更改颜色

回答

相关问题