0

I am trying to use the Jquery datepicker with a MySQL database to show any dates that have events.

I have set showOtherMonths: true because of preference.

What I would like to do is style the disabled dates that are in the current month so they are not the same colour as the dates in the other months.

how can I add the styles for this?

$(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, ""];
        }           
    });
});
4

2 回答 2

1

您可以使用 css def

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

演示：小提琴

于 2013-09-05T16:10:48.590 回答
0

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

.ui-datepicker-unselectable .ui-state-default {
    background: yellow;
    color: red;
}
于 2018-12-26T10:14:41.567 回答