6

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

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

米。

4

6 回答 6

9

要更改 p:calendar 的输入字段的宽度，以下对我使用 Primefaces 5.1 有效。

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

.calendarClass input {
    width: 50px !important
}

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

<p:calendar id="fromdate" styleClass="calendarClass" .../>
于 2016-04-11T07:40:22.707 回答
4

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

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

然后添加您的属性（边框、字体大小/粗细...）以使课程符合您的喜好。

于 2012-11-21T10:12:03.210 回答
4

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

于 2014-07-09T11:06:57.717 回答
4

要更改 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

于 2019-05-22T10:36:39.910 回答
0

为 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 结合起来以仅更改日历输入而不是所有其他输入字段。

于 2012-07-26T10:22:03.990 回答
0

这在内p:calendar联模式下对我有用：

CSS：

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

HTML：

<p:calendar styleClass="calendar" mode="inline" locale="pt_BR".../>
于 2016-11-25T21:41:03.320 回答