CODEWITHSUNDEEP
jqueryjquery-ui-datepickeronselect
Zwen2012
Zwen2012

Reputation: 3498

jQuery: Adding Style to selected Day in Datepicker

I try to manipulate the datepicker of jquery, because I want a multiple selection. Now I Want to change the style of the selected Day, for example make the text in green. I have no idea, how I can change the style. Are there any possibilities?

THANKS FOR YOU HELP!

Here is my code:

$(".testpicker").datepicker({

    numberOfMonths: 2,
    showButtonPanel: false,
    onSelect: function(test,object){
        console.log(object.id);

        //#####My first tries######//:
        $("#"+object.id).css('color','green');
        $(this).css('background-color','white');
        //###########//

        if(~$.inArray(test,dates))
        {
            console.log(test)
        }
        else
        {
            dates.push(test);
        }
        console.log(dates);
        console.log(object);
        //prevents closing
        $(this).data('datepicker').inline = true;
    },
    onClose: function() {
        $(this).data('datepicker').inline = false;
    }
});

Upvotes: 2

Views: 7224

Answers (2)

Akshay
Akshay

Reputation: 216

To change the color of the selected date in datepicker use following css on your jsp page:

#ui-datepicker-div .ui-state-highlight {
   background:red;
}

Upvotes: 2

ebram khalil
ebram khalil

Reputation: 8321

I think you need to open your inspector(firebug) and see the class assigned to the selected cell(selected date).

for example the day of today is given the class .ui-state-highlight

the date you select is given the class .ui-state-active

Upvotes: 0

Related Questions