javascript - jquery datepicker多个css类

Question

我正在寻找一种可能性，用不同的 CSS 类在 jquery 的 datepicker 中突出显示不同的日期。

简单地说，追加.green到27-10-2013、.yellow到02-11.2013和.red到05-11-2013。到目前为止，我找不到beforeShowDay在 JQuery 的官方日期选择器中使用多个 CSS 类的任何解决方案。

谢谢你的建议。

Answer 1

这是使用帖子中找到的答案：https ://stackoverflow.com/a/6048648/1524085

我已经对其进行了修改以适应 OP 的需求。

http://jsfiddle.net/sN9Xy/1/

编辑： http: //jsfiddle.net/sN9Xy/2/在同一个月显示所有颜色。

$(".date").datepicker({
    beforeShowDay: SetDayStyle
});

var cssDates = [
                ["10/27/2013", "green"], 
                ["2/11/2013", "yellow"], 
                ["5/11/2013", "red"]
               ];

function SetDayStyle(date) {
    var enabled = true;
    var cssClass = "";
    var toolTip = "";

    var day = date.getDate();
    var month = date.getMonth() + 1; //0 - 11
    var year = date.getFullYear();
    var compare = month + "/" + day + "/" + year;

    for (var i = 0; i < cssDates.length; i++) {
        //var toolTip = cssDates[i].indexOf(compare) + " " + compare
        if (cssDates[i].indexOf(compare) >= 0) cssClass = cssDates[i][1];
    }

    return new Array(enabled, cssClass, toolTip);
}

Answer 2

工作小提琴： http: //jsfiddle.net/ZUZSH/1/，从这里得到想法http://forum.jquery.com/topic/datepicker-add-class

var redDays = [[10, 19, 2013],[10, 21, 2013]];
var greenDays = [[10,20, 2013],[10, 22, 2013]];
$("#cal").datepicker({ beforeShowDay: myDays})
function myDays(date) {
for (i = 0; i < redDays.length; i++) {
if (date.getMonth() == redDays[i][0] - 1
&& date.getDate() == redDays[i][1]
&& date.getFullYear() == redDays[i][2]) {
return [true, 'red' ];
}
}

for (i = 0; i < greenDays.length; i++) {
if (date.getMonth() == greenDays[i][0] - 1
&& date.getDate() == greenDays[i][1]
&& date.getFullYear() == greenDays[i][2]) {
return [true, 'green' ];
}
}
return [true, ''];    
}

Answer 3

基思伍德的日期选择。

$('a[title="Select Wednesday, Oct 16, 2013"]').addClass("red");

格式化您的日期以Select Wednesday, Oct 16, 2013格式化并在选择器中使用它。