In Primefaces, how do I change the icon that is being used by the button of the calendar field?
For example, in the following field
<p:calendar value="#{calendarBean.date3}" id="popupButtonCal" showOn="button" />
I want to change the icon to .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:
<p:mandButton id="modalDialogButton" value="" onclick="dlg2.show();" type="button" icon="ui-calendar"/>
CSS:
.ui-widget .ui-calendar {
background-image: url(#{resource['images:country_flag.gif']});
}
PROBLEMS:
I do see the image on the
p:mandButton
button now. But, I am getting the warning message:Apr 03, 2012 10:43:58 AM .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:calendar
that I should override in order to change the image on the calendar button.
In Primefaces, how do I change the icon that is being used by the button of the calendar field?
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/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:
<p:mandButton id="modalDialogButton" value="" onclick="dlg2.show();" type="button" icon="ui-calendar"/>
CSS:
.ui-widget .ui-calendar {
background-image: url(#{resource['images:country_flag.gif']});
}
PROBLEMS:
I do see the image on the
p:mandButton
button now. But, I am getting the warning message:Apr 03, 2012 10:43:58 AM .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:calendar
that I should override in order to change the image on the calendar button.
- replace default image with yours – safarov Commented Apr 2, 2012 at 18:09
- Thanks. But I would not like to change the primefaces jar. – rapt Commented Apr 2, 2012 at 18:12
- @Cagatay Civici could you please provide an example/link? Thanks. – rapt Commented Apr 3, 2012 at 13:32
- how about this approach stackoverflow./a/512067/617373 – Daniel Commented Apr 3, 2012 at 16:02
- you tried it with el expression in css file which cannot be done... in the link they do it with jquery... – Daniel Commented Apr 3, 2012 at 18:02
1 Answer
Reset to default 4try this
.ui-icon-calendar {
background-image: <your URL> !important;
background-position: center center !important;
width: 16px;
height: 16px;
}