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


Answers:


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