JQuery Ui Date and Time Change Icons

Question

Is there a way to change the month icon "Prev" and "Next" in JQuery Ui Datepicker, I know that this icon is defined by the class. It seems that the thematic video does not give this option.

Answer 1

You can redefine arrow styles and set them to your own image; don't forget to set !importantin your custom rules to override jQueryUI default values.

How (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 script

Answer 2

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

CSS datepicker, .

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

Answer 3

, , , .

. , , . . , -, (FontAwesome, Ionicons ..). , .

css

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

Prev, . , . , :before .

.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;
}

, - , , . :

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

!

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

,

Answer 4

, CSS jquery-ui.css, .

---

?

, CSS-. CSS , .

?

1) CSS CSS. , ( -).

:

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

2) Use the CSS preprocessor for the user interface and modify the precompiled code. An example can be found here .