Question

我可以在p：inputText，p：autocompelte，p：inputMask中自定义输入字段（更改字体，大小等），但我不知道如何更改p：calendar的输入文本字段。

使用.ui-datepicker-sth适用于面板中的元素，但我找不到任何更改p：calendar元素中输入文本字段的内容。任何人都可以帮助我吗？

麋。

Answer 1

在这种情况下，如@Matt所示，您应该覆盖ui-inputfield类。例如，要删除边框半径或阴影（与焦点相同）：

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

然后添加您的属性（border，font-size / weight ...）以使您的课程符合您的喜好。

Answer 2

您可以直接使用size属性来更改大小

Answer 3

为Primefaces日历输入字段生成的html如下所示（从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"  ... >

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

Answer 4

这对我来说对p:calendar采用内嵌模式：

CSS：

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

HTML：

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

Answer 5

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

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

.dateTimeField{
   width: 200px;
}

或

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

或

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

.dateTimeField input {
   width:200px;
}

here

primefaces日历输入文本如何更改

5 个答案: