javascript Primefaces：如何更改日历字段按钮上的默认图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9981076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Primefaces: how to change the default icon on the button of the calendar field?
提问by rapt
In Primefaces, how do I change the icon that is being used by the button of the calendar field?
在 Primefaces 中，如何更改日历字段按钮正在使用的图标？
For example, in the following field
例如，在以下字段中
<p:calendar value="#{calendarBean.date3}" id="popupButtonCal" showOn="button" />
I want to change the icon to http://forum.primefaces.org/images/smilies/icon_e_wink.gif.
我想将图标更改为http://forum.primefaces.org/images/smilies/icon_e_wink.gif。
I've looked at the documentation, but I cannot find an attribute for this.
我看过文档，但我找不到这个属性。
UPDATE:
更新：
I have tried the following, with partial success:
我尝试了以下方法，取得了部分成功：
JSF:
JSF：
<p:commandButton id="modalDialogButton" value="" onclick="dlg2.show();" type="button" icon="ui-calendar"/>
CSS:
CSS：
.ui-widget .ui-calendar {
background-image: url(#{resource['images:country_flag.gif']});
}
PROBLEMS:
问题：
I do see the image on the
p:commandButtonbutton now. But, I am getting the warning message: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.I could not find a css style on the
p:calendarthat I should override in order to change the image on the calendar button.
我现在确实看到
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.我找不到 css 样式
p:calendar，我应该覆盖它以更改日历按钮上的图像。
回答by liukvar
try this
试试这个
.ui-icon-calendar {
background-image: <your URL> !important;
background-position: center center !important;
width: 16px;
height: 16px;
}
