Jquery datepicker在日期选择上显示多种颜色

时间:2013-08-23 19:47:39

标签: jquery datepicker jquery-ui-datepicker

我有一个日期选择器,显示活跃的日子。在这些活跃的日子里,我需要在选择每个日期时显示不同的颜色,而不是日期选择器的默认颜色。 我有三个日期数组,用于确定要显示的颜色。

array1 = {8/5/2013, 8/14/2013, 8/21/2013} - Background Blue
array2 = {8/15/2013, 8/22/2013} - Background Red 
array3 = {8/9/2013, 8/13/2013} - Background Green

如何扩展日期选择器以实现此目的?

1 个答案:

答案 0 :(得分:2)

喜欢这样: jsFiddle example

$('#dp').datepicker({
    beforeShowDay: colorize
});
var blueDates = ['8-5-2013', '8-14-2013', '8-21-2013'];
var greenDates = ['8-15-2013', '8-22-2013'];
var redDates = ['8-9-2013', '8-13-2013'];
function colorize(date) {
    mdy = (date.getMonth() + 1) + '-' + date.getDate() + '-' + date.getFullYear();
    console.log(mdy);
    if ($.inArray(mdy, blueDates) > -1) {
        return [true, "blue"];
    } else if ($.inArray(mdy, greenDates) > -1) {
        return [true, "green"];
    } else if ($.inArray(mdy, redDates) > -1) {
        return [true, "red"];
    } else {
        return [true, ""];
    }
}