12

PrimeNG を使用してアプリケーションで DatePicker を表示するという奇妙なバグがあります。ブートストラップの を使用しようとするとform-control、視覚的なバグが発生します。

ここに私のテンプレートがあります：

<div class="form-group row">
    <div class="form-group col-md-2">
        <label for="valeur">Valeur</label>
        <input type="number" id="valeur" class="form-control" />
    </div>

    <div class="form-group col-md-5">
        <label for="dateDebut">Date de début</label>
        <p-calendar id="dateDebut" dateFormat="dd/mm/yy" styleClass="form-control" [showIcon]="true"></p-calendar>
    </div>

    <div class="form-group col-md-5">
        <label for="dateFin">Date de fin</label>
        <p-calendar id="dateFin" dateFormat="dd/mm/yy" styleClass="form-control" [showIcon]="true"></p-calendar>
    </div>
</div>

結果は次のとおりです。

ここに画像の説明を入力

編集

参考になれば、生成された HTML は次のとおりです。

<div class="form-group col-md-5" _ngcontent-scp-1="">
   <label for="dateDebut" _ngcontent-scp-1="">Date de début</label>
   <p-calendar ng-reflect-show-icon="true" ng-reflect-date-format="dd/mm/yy" ng-reflect-style-class="form-control" styleclass="form-control" id="dateDebut" dateformat="dd/mm/yy" _ngcontent-scp-1="">
      <!--template bindings={
         "ng-reflect-ng-if": "true"
         }-->
      <span ng-reflect-initial-classes="form-control" class="form-control ui-calendar" ng-reflect-raw-class="ui-calendar">
         <input id="dp1467976345328" ng-reflect-value="" class="hasDatepicker ui-inputtext ui-widget ui-state-default ui-corner-left" ng-reflect-raw-class="[object Object]" type="text"><!--template bindings={
            "ng-reflect-ng-if": "true"
            }--><button ng-reflect-icon="fa-calendar" type="button" pbutton="" class="ui-datepicker-trigger ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only"><span class="ui-button-icon-left ui-c fa fa-fw fa-calendar"></span><span class="ui-button-text ui-c">ui-button</span></button>
      </span>
      <!--template bindings={
         "ng-reflect-ng-if": "false"
         }-->
   </p-calendar>
</div>
4

7 に答える 7

6

PrimeNGのカレンダー コンポーネントには、インライン スタイルを追加するための 2 つと、スタイル ( css) クラスstyleを追加するための 2 つの 4 つのスタイル属性styleClassがinputStyleありinputStyleClassます。

  • stylestyleClassコンポーネント自体（カレンダー）のスタイルを設定するために使用されます
  • inputStyleinputStyleClass入力フィールドのスタイル設定に使用されます

したがって、この動作はバグではなく、間違った属性を使用しているため、予期される動作です。のカレンダー入力フィールドにform-controlクラスを追加する場合は、属性の代わりに使用する必要があります。PrimeNGinputStyleClassstyleClass

 <div class="form-group col-md-5">
    <label for="dateFin">Date de fin</label>
    <p-calendar id="dateFin" dateFormat="dd/mm/yy" inputStyleClass="form-control" [showIcon]="true"></p-calendar>
</div>

PrimeNGのカレンダー コンポーネントの属性の完全なリストは、こちらで確認してください。

于 2016-11-03T23:50:39.007 に答える
0

@Srefan Svrkotaの回答への追加。フォーム コントロール クラスのインライン スタイルを上書きする別の css クラスを作成できます。

    .showCalenderInline
    {
    display: inline !important;
    }

and apply to calendar : inputStyleClass="form-control showCalenderInline"
于 2016-12-02T15:42:01.993 に答える
0

こんにちは皆さん、これを試すことができます。私のコードにこれを使用しています

次のようにstyleClassとinputStyleClassを追加します。

<p-calendar styleClass="form-control" inputStyleClass="form-control" ></p-calendar>

私にとっては、次のようにいくつかのcssを変更してみてください：

.ui-inputtext{ margin:-7px -12px; }

.ui-button, button.ui-button.ui-state-default, .ui-button.ui-state-default{ top:0px; right: -1px; }

.ui-calendar button{ width: 2.5em; }

結果は ここに画像の説明を入力

于 2017-01-06T08:26:35.913 に答える