jquery datepicker多个css类

Question

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

简单地说，追加.green至27-10-2013 ， .yellow到02-11.2013和.red至05-11-2013 。 到目前为止，我找不到任何解决方案在JQuery的官方日期选择器中使用多个带有beforeShowDay 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

基思伍德的日期选择。

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

将日期格式设置为Select Wednesday, Oct 16, 2013格式并在选择器中使用它。

Answer 3

工作小提琴： 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, ''];    
}