Primefaces: how to change the default icon on the button of the calendar field?

Tags: javascript,jquery,css,jsf,primefaces

Problem :

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

I've looked at the documentation, but I cannot find an attribute for this.


I have tried the following, with partial success:


<p:commandButton id="modalDialogButton" value="" onclick=";" type="button" icon="ui-calendar"/>


.ui-widget .ui-calendar {

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


  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.

Solution :

try this

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

    CSS Howto..

    How to stop jquery from overriding CSS color?

    SceneBuilder (by gluon) doesn't show imported fonts

    How to align radio buttons inside a DIV?

    How to add a color transitions in CSS and HTML like the one in the login area of the Instagram app?

    continue with same Show and hide divs when we change page

    website div won't stretch from left to right, how do you fix css?

    How to apply a single line of CSS to an external iframe?

    What is the best tutorial or tutorials on how to make a tooltip using CSS or JQuery or Both? [closed]

    Class inside of Div not showing properly

    How to get started creating CSS for given (dynamically generated) HTML?

    How can i create a div which contains two divs and stretch automatically

    How does this pure CSS tab work?

    How to tell what is the right css line to apply in nested classes

    How is it that CSS borders create a triangle?

    How would I change the code to work with a table instead of body? [closed]

    CSS: How to position child divs in main div side by side

    How can I use CSS to make a multi-select box but have the label appear on top instead of to the left?

    How do I display content in a way like UICollectionView on the web?

    How to design a CSS for a centered floating confirm dialog?

    how to make background 100% on a top menu

    How to make emails responsive?

    Show different button on page load via Jquery

    Picture thumbnail shown in Google image search output is
    not , why? [closed]
    It basically comes down to preference. It is considered outdated to use table for data layouts. Use table for just that - actual tables. For the layout and such tasks,...
    Read more

    How can I apply a custom material design theme to a Bootstrap component

    How to get background img to show up in :after selector?

    How to CSS style angular directive?

    How to remove white border from blur background image

    How to style text in JQuery?

    how to make css div margin-top 20px from div above

    How to make website change its layout of image/text when the browser dimensions are changed?