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

    CSS: How to align vertically a “label” and “input” inside a “div”?

    How to center this flip card example?

    How do I hide images that have a certain class when creating a pdf from html?

    How to stop a hovered list item's text from changing back to default when hovering over subnav

    How to prevent the CSS `:before` text being editable while the `div` itself is editable?

    CSS How to Transition from White to Background on Hover

    How do I 'freeze' a block level element?

    hide/show element with add/removeClass with CSS transition

    How to center an image between two columns in CSS?

    How do I make the rest of the page fade to black once my div loads and fade out once the div is closed?

    how to make form input in middle

    How to prevent CSS table-cell content expanding to full height of row

    css - how to change image source by its id?

    How to make display:flex work for responsiveness - Bootstrap?

    How to have the class=“selected” depending on what the current page/url is

    How to align elements properly using CSS

    In jQuery how do I make multiple changes to css in a function?

    javascript/jquery - how to get the width of an element / css class that hasn't been added to dom yet

    How to make 4 divs float left and one float right with this order?

    Hide/Show menu with increase/decrease of width

    Sublime - CSS - how to auto add .class for each section in the whole code?

    How to make a CSS Menu “Selected” with Hover Image Gallery Effect?

    how to specify different css for ie

    How can I compress / gzip my mimified .js and .css files before publishing to AWS S3?

    how do you set css to add an asp img?

    How to use sprite images in html/css and toggle change with jQuery

    How to create rounded corners on DIV's with CSS and ASP.NET MVC 3

    How to define dynamic height in css (or html)?

    How should I start to learn JavaScript, jQuery, etc.? My programming knowledge is zero [closed]

    How to animate text with css font-weight property in jQuery ? normal to bold