Jquery Ui Datepicker更改图标

Question

有没有办法可以更改Jquery Ui Datepicker的"Prev"和"Next"月图标,我知道图标是由类定义的.看起来主题滚轮不提供此选项.

Answer 1

您可以覆盖箭头样式并将其设置为自定义图像; 记得设置!important为自定义规则以覆盖jQueryUI默认值.

喜欢(在谷歌上找到的图像):

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

演示小提琴

Answer 2

我知道这是一个老问题,但如果我降落在这里,其他人也会这样.

我提出了一种不同的方法.使用图像时,如果应用程序更改了外观,则无法更改颜色或悬停状态颜色.不是没有重新创建图像或精灵.如果您使用您选择的库(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;
}

最后,假设您的根目录中已经有Web图标库,请使用项目前附加的相应图标替换该类的内容.如果是上一个箭头,你会这样做:

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

现在你可以添加悬停效果了!

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

其余的是颜色和类似的东西

看到它在这里工作

Answer 3

只需使用您自己的CSS覆盖图标即可

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

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

小提琴

如果在CSS前面加上特定日期选择器的选择器,则不会影响其他元素.

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