3

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.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:

<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']});
}

PROBLEMS:

  1. I do see the image on the p:commandButton button 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.

  2. 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.

rapt
  • 11,810
  • 35
  • 103
  • 145
  • replace default image with yours – safarov Apr 02 '12 at 18:09
  • Thanks. But I would not like to change the primefaces jar. – rapt Apr 02 '12 at 18:12
  • @Cagatay Civici could you please provide an example/link? Thanks. – rapt Apr 03 '12 at 13:32
  • how about this approach http://stackoverflow.com/a/512067/617373 – Daniel Apr 03 '12 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 Apr 03 '12 at 18:02
  • @Daniel EL expression was translated correctly - that's why I can see the image. Why do you think that EL cannot be used in a CSS file? If I don't want to use EL, I can use physical path in my css, I don't have to use jQuery for that (I assume I should get the same result). But I do not understand why I am getting the warning. – rapt Apr 03 '12 at 18:18
  • sorry haven't really looked into u'r EL... so its my bad... how about something like that url('#{facesContext.externalContext.requestContextPath}/resources/images/country_flag.gif'); does it throws an error (info) message too ? – Daniel Apr 03 '12 at 18:49

1 Answers1

4

try this

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