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

Keith Wood的日期选择。

$('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, ''];    
}

jquery datepicker多个css类

3 个答案: