CODEWITHSUNDEEP
cssjquery-uidatepicker
John
John

Reputation: 10146

How to edit css for jquery datepicker prev/next buttons?

Using the JQuery UI datepicker, in the header it gives you the option to go to the next month or previous month with left/right arrows. My question is what is the css property to change the colors when hovering over the previous or next arrows?

Upvotes: 2

Views: 14692

Answers (3)

Ashot
Ashot

Reputation: 521

<script>
    $(".ui-datepicker-next, .ui-datepicker-prev").hover(function () {
        $(this).addClass("hover");
        },
    function () {
        $(this).removeClass("hover");
        });
</script>

and css for your class 'hover'

.hover
{
    background-image:url('paper.gif');
}

Upvotes: 0

Brian Hoover
Brian Hoover

Reputation: 7991

It's a little harder than it seems. As NimChipsky pointed out, it's in ui-state-hover, but the colors aren't there directly.

If you look at ui-state-hover, out of the box, you will see something that looks like:

background-image: url("images/ui-icons_222222_256x240.png");

Basically, this is telling you that you will be using an icon sheet with color #222222, but the icon sheet graphic has to be available. You can generate other icon sheets directly, with other colors, by using the jQuery UI theme builder.

Upvotes: 0

NimChimpsky
NimChimpsky

Reputation: 47290

ui-state-hover is the class that is applied when hovering, see here

Upvotes: 1

Related Questions