Primefaces:如何更改日历字段按钮上的默认图标?

时间:2012-04-02 17:41:04

标签: javascript jquery css jsf primefaces

在Primefaces中,如何更改日历字段按钮使用的图标?

例如,在以下字段中

<p:calendar value="#{calendarBean.date3}" id="popupButtonCal" showOn="button" />

我想将图标更改为http://forum.primefaces.org/images/smilies/icon_e_wink.gif

我看过documentation,但我找不到这个属性。

更新

我尝试了以下方法,取得了部分成功:

JSF:

<p:commandButton id="modalDialogButton" value="" onclick="dlg2.show();" type="button" icon="ui-calendar"/>

CSS:

.ui-widget .ui-calendar {

    background-image: url(#{resource['images:country_flag.gif']});
}

问题:

  1. 我现在确实在p:commandButton按钮上看到了图像。但是,我收到了警告信息:

    Apr 03, 2012 10:43:58 AM com.sun.faces.application.resource.ResourceHandlerImpl logMissingResource WARNING: JSF1064: Unable to find or serve resource, images/country_flag.gif.jsf.

  2. 我无法在p:calendar上找到我应该覆盖的css样式,以便更改日历按钮上的图像。

1 个答案:

答案 0 :(得分:4)

试试这个

.ui-icon-calendar {
    background-image: <your URL> !important;
    background-position: center center !important;
    width: 16px;
    height: 16px;
}