CODEWITHSUNDEEP
jquerydatepicker
Karthik Chintala
Karthik Chintala

Reputation: 5545

.addClass in jquery datepicker not working

I want to add a custom color to the disabled future dates in jQuery datepicker.

But when I try to add a custom class, the class is never added to the disabled dates.

Here is my code anyways:

<input type="text" id="picker"/>

$(function(){
    $("#picker").datepicker({
        maxDate: 0,
        beforeShow: function(input, inst){
            $('.ui-datepicker-calendar > tbody > tr > td:has(span)').each(function (index) {
                        console.log($(this).closest("td"));

                        $(this).closest("td").addClass("red");
                    });
        }
    });
});

JSFIDDLE

Upvotes: 0

Views: 219

Answers (2)

Sadikhasan
Sadikhasan

Reputation: 18600

You need to change your css for disabled date. 

.ui-datepicker-calendar td.ui-state-disabled span{
     color: red;
}

JS Fiddle

Upvotes: 0

Rahul Desai
Rahul Desai

Reputation: 15501

Add this CSS to your code:

td.ui-datepicker-unselectable.ui-state-disabled span{
    background: red;
}

Updated jsFiddle

No need for beforeShow if you are using this CSS.

Upvotes: 3

Related Questions