primefaces日历输入文本如何更改

Question

我可以在p:inputText,p:autocompelte,p:inputMask中自定义输入字段(更改字体,大小等),但我不知道如何更改p:calendar的输入文本字段.

使用.ui-datepicker-sth适用于面板中的元素,但我找不到任何更改p:calendar元素中输入文本字段的内容.谁能帮帮我,请问？

糜.

Answer 1

要更改p:日历的输入字段的宽度,以下使用Primefaces 5.1为我工作.

我在CSS文件中定义了这个:

.calendarClass input {
    width: 50px !important
}

p:calendar组件样式类设置为:

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

Answer 2

要更改 p:calendar 输入字段的宽度，您可以使用

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

.dateTimeField{
   width: 200px;
}

或者

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

或者

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

.dateTimeField input {
   width:200px;
}

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

Answer 3

Primefaces 日历输入字段生成的 html 如下所示（从展示中复制）：

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

因此，您需要调整/覆盖一个或多个给定的类来更改输入字段。也许您需要将 css 选择器与生成的 id 结合起来，以仅更改日历输入，而不更改所有其他输入字段。