Question

我正在尝试将Jquery datepicker与MySQL数据库一起使用来显示任何有事件的日期。

由于偏好，我设置了 showOtherMonths：true 。

我想要做的是设置当月的停用日期，以便它们与其他月份的日期颜色不同。

如何为此添加样式？

$(document).ready(function() 
{
    var selected_dates = new Array();
    // get all the events from the database using AJAX
    selected_dates = getSelectedDates();

    $('#datepicker').datepicker({
        dateFormat: 'yy-m-d',
        inline: true,
        showOtherMonths: true,
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        beforeShowDay: function (date)
        {
            // get the current month, day and year
            // attention: the months count start from 0 that's why you'll need +1 to get the month right
            var mm = date.getMonth() + 1, 
                dd = date.getDate(),    
                yy = date.getFullYear();
            var dt = yy + "-" + mm + "-" + dd;

            if(typeof selected_dates[dt] != 'undefined')
            {
                // put a special class to the dates you have events for so you can distinguish it from other ones
                // the "true" parameter is used so we know what are the dates that are clickable
                return [true, " my_class"];
            }

            return [false, ""];
        }           
    });
});

Answer 1

您可以使用css def

.ui-datepicker-other-month.ui-state-disabled:not(.my_class) span{
    color: red;    
}

演示：Fiddle

Answer 2

我将下面的代码添加到自定义Style.css中，它的工作原理就像一个魅力。

.ui-datepicker-unselectable .ui-state-default {
    background: yellow;
    color: red;
}

jquery datepicker css造型禁用日期

2 个答案: