calendar - primefacesカレンダー入力テキストの変更方法

Question

p:inputText、p:autocompelte、p:inputMask の入力フィールドをカスタマイズ (フォント、サイズなどを変更) することはできますが、p:calendar の入力テキスト フィールドを変更する方法がわかりません。

.ui-datepicker-sth を使用すると、パネルの要素に対しては正常に機能しますが、p:calendar 要素の入力テキスト フィールドを変更するものは見つかりません。誰か助けてくれませんか？

ミ。

Answer 1

p:calendar の入力フィールドの幅を変更するには、Primefaces 5.1 を使用して次のようにしました。

CSSファイルでこれを定義しました：

.calendarClass input {
    width: 50px !important
}

p:calendar コンポーネント スタイル クラスは次のように設定されます。

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

Answer 2

この場合、@Matt が示すように、ui-inputfieldクラスを上書きする必要があります。たとえば、境界線の半径または影を削除するには (フォーカスと同じ):

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

そして、プロパティ (border、font-size/weight...) を追加して、好みに合わせてクラスを作成します。

Answer 3

p:calendarこれはインラインモードで私にとってはうまくいきました：

CSS:

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

HTML:

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

Answer 4

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

したがって、入力フィールドを変更するには、指定されたクラスの 1 つ以上を適応/上書きする必要があります。おそらく、css セレクターを生成された ID と組み合わせて、カレンダー入力のみを変更し、他のすべての入力フィールドを変更する必要はありません。