primefaces calendar input text how to change

Question

I may customize input fields (change font, size, etc) in p:inputText, p:autocompelte, p:inputMask, but I have no idea how to change input text field for p:calendar.

Using .ui-datepicker-sth works fine for elements from the panel, but I can't find anything for changing input text field in p:calendar element. Can anyone help me, pls?

Mi.

Answer 1

To change the width of the input field for the p:calendar, the following worked for me using Primefaces 5.1.

I defined this in the CSS file:

.calendarClass input {
    width: 50px !important
}

The p:calendar component style class is set as:

<p:calendar id="fromdate" styleClass="calendarClass" .../>

Answer 2

In this case, as @Matt indicates, you should overwrite the ui-inputfield class. For example, to remove the border radius or the shadow (the same with the focus):

.ui-inputfield {
    border-radius:0px;
    box-shadow: none;
}

And then add your properties (border, font-size/weight...) to make the class to your liking.

Answer 3

You can use size attribute directly for changing the size

Answer 4

To change the width of the input field for the p:calendar you can use

<p:calendar inputStyleClass="dateTimeField" .../>

.dateTimeField{
   width: 200px;
}

or

<p:calendar inputStyle="width:200px" .../>

or

<p:calendar styleClass="dateTimeField".../>

.dateTimeField input {
   width:200px;
}

https://forum.primefaces.org/viewtopic.php?t=2610