How to show the icon, instead of dots in calendar button?

[tombrito]

I'm using a calendar component:

Code: Select all

<p:calendar id="calendar" value="#{myMB.date}" showOn="both" />

and it's resulting in a button with 3 dots, instead of the icon image.

The generated html is:

Code: Select all

<div id="mainPage:j_idt269:calendar"
	class="ui-calendar ui-calendar-popup">
	<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
		<input id="mainPage:j_idt269:calendar_input"
			name="mainPage:j_idt269:calendar_input"
			value="18/05/18"
			class="hasDatepicker"
			type="text">
			<button type="button" class="ui-datepicker-trigger">...</button>
	</div>
</div>

I can add a background image (overriding the css), byt I still have the 3 dots (value of the generated inner button).

I could override it with javascript... but is there a way to do not generate the 3 dots value? How do I generate the button like in the showcase with the image icon?

[kukeltje]

Start the other way around. Instead of correcting what you see, prevent it happening. Start with a completely empty page. Just a `p:calendar`. Does it work? If it does, check what css that you created messes things up.