Vinc 웃 Vinc 웃 - 3 months ago 30
CSS Question

Jquery Ui Datepicker change icons

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.

enter image description here

Answer

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