CODEWITHSUNDEEP
calendarprimefaces
user1554219
user1554219

Reputation: 61

primefaces calendar input text how to change

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.

Upvotes: 6

Views: 21998

Answers (6)

Borja
Borja

Reputation: 3610

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

Upvotes: 5

Miguel Vieira
Miguel Vieira

Reputation: 57

This worked for me with p:calendar in inline mode:

CSS:

.calendar .ui-datepicker-inline{
  width: 100% !important;
}

HTML:

<p:calendar styleClass="calendar" mode="inline" locale="pt_BR".../>

Upvotes: 0

prasad_
prasad_

Reputation: 14297

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

Upvotes: 9

Vandana Acharya
Vandana Acharya

Reputation: 51

You can use size attribute directly for changing the size

Upvotes: 4

AdSsa
AdSsa

Reputation: 288

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.

Upvotes: 4

Matt Handy
Matt Handy

Reputation: 30025

The generated html for the Primefaces calendar input field looks like this (copied from the showcase):

<input id="form:popupCal_input" name="form:popupCal_input" type="text" 
       class="ui-inputfield ui-widget ui-state-default ui-corner-all 
              hasDatepicker ui-state-hover" role="textbox"  ... >

So you need to adapt / overwrite one or more of the given classes to change the input field. Maybe you need to combine your css selector with the generated id to change the calendar input only and not all other input fields.

Upvotes: 0

Related Questions