Question

53

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

rated 0 times [ 57] [ 4] / answers: 1 / hits: 16011 / 12 Years ago, mon, april 2, 2012, 12:00:00

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:

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.

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

clarkulisesa

Add To Favorites

Follow

Total Points: 422

Total Questions: 93

Total Answers: 112

Location: Austria

Member since Thu, Jan 7, 2021

3 Years ago

clarkulisesa questions

1 Google BigQuery Error: Syntax error: Illegal input character %

Fri, Sep 18, 20, 00:00, 4 Years ago

1 how to change state of a react component from another component

Mon, Jun 22, 20, 00:00, 4 Years ago

1 How to compare objects using lodash regardless on their order

Tue, Jun 16, 20, 00:00, 4 Years ago

1 How to listen sortChange(event) on Angular for ag-Grid?

Mon, Feb 24, 20, 00:00, 4 Years ago

1 Vue JS provide/inject and Props

Mon, Aug 12, 19, 00:00, 5 Years ago

View All

answered 12 Years ago jonrened · Accepted Answer

try this

.ui-icon-calendar {

    background-image: <your URL> !important;

    background-position: center center !important;

    width: 16px;

    height: 16px;

}