Jquery Ui Datepicker change icons

Question

Is there a way I can change the "Prev" and "Next" month icon of the Jquery Ui Datepicker, I know the icon is defined by the class. It look like the theme roller don't give this option.

Answer 1

You can override the arrow styles and set them to your custom image; remember to set !important to your custom rules in order to override the jQueryUI defaults.

Like (images found on google):

.ui-datepicker-prev span {
    background-image: url(http://legacy.australianetwork.com/img/icon_arrow_left_black.png) !important;
        background-position: 0px 0px !important;
}

.ui-datepicker-next span {
    background-image: url(http://legacy.australianetwork.com/img/icon_arrow_right_black.png) !important;
        background-position: 0px 0px !important;
}

Demo Fiddle

Answer 2

I understand this is an old question but if I landed here, so will others.

I propose a different approach. When you use images, you are not able to change the color or hover state color should your application changed the look and feel. Not without recreating the images or sprite again. It is a much better idea if you changed these images with web icons using the library of your choice (FontAwesome, Ionicons, etc). This is what I do.

First, remove the image with css

.ui-datepicker-prev span, .ui-datepicker-next span {
    background-image: none !important;
}

Then, remove the Prev text so that the icon can take its place, You are not really removing it, you're hiding it. Technically you can't remove it because the :before doesn't work without something to append to.

.ui-datepicker-prev span.ui-icon {
    width: 6px; //this the width of the icon. increase it if your icon is bigger
    height: 16px;
    display: block;
    text-indent: 0;
    overflow: hidden;
    background-repeat: no-repeat;
}

Finally, assuming you already have the web icon library already in your root, replace the content of the class with the appropriate icon attached before the item. In the case of a prev arrow, you would do this:

.ui-datepicker-prev span:before {
    content: "\f104";
    font-family: FontAwesome;
    position: relative;
}

Now you can add hover effects!

.ui-datepicker-prev:hover {
    color: #fff;
}

The rest is color and stuff like that

See it working HERE

Answer 3

Just override the icons with your own CSS

.ui-icon.ui-icon-circle-triangle-w {
    background: whatever
}

.ui-icon.ui-icon-circle-triangle-e {
    background: whatever
}

FIDDLE

If you prefix the CSS with the selector of a specific datepicker, it won't affect other elements.

.mydatepicker .ui-icon.ui-icon-circle-triangle-e { ... etc

Answer 4

You could of course edit the CSS directly in the jquery-ui.css file, but this is not acceptable.

---

Why not?

Let's say you change this icon in the vendor-provided CSS. When you go to upgrade these vendor CSS files in the future, you will have to manually find and replace your hack every time.

What's the alternative?

1) Override the UI CSS in a custom CSS file. That way, you are not tampering with the vendor files (almost always a no-no).

Your file will have like so:

 .ui-icon.ui-icon-circle-triangle-e {
      background-image: url('...');
 }

2) Use a CSS preprocessor for UI, and change the precompiled code. An example can be found here.