Как исправить компонент css pcalendar primeng? - PullRequest
Новая
       92

Как исправить компонент css pcalendar primeng?

0 голосов
/ 29 мая 2020

Я работаю с p-таблицей primeng с редактируемой ячейкой. Я пытаюсь работать с p-Calendar в своей таблице. это мой код: 

<p-table #pjoTable [columns]="pjoColumns" id="sinistre-instruction-ouv-pjo-table" [rows]="10" [scrollable]="true" [responsive]="true" [value]="listPjos">
  <ng-template pTemplate="colgroup" let-columns>
    <colgroup>
      <col *ngFor="let col of columns" [ngStyle]="{'width' : col.width}">
    </colgroup>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        {{ col.header | translate}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex" let-columns="columns">
    <tr [pSelectableRow]="rowData">
      <td>{{rowData.piecesJust?.code}}</td>
      <td>{{rowData.piecesJust?.libelle }}</td>
      <td pEditableColumn>
        <p-cellEditor>
          <ng-template pTemplate="input">
            <div class="row" style="margin-left: 1px;margin-right: 2px;">
              <div class="col-md-12" style="padding: 2px;">

                <p-calendar [(ngModel)]="rowData.sinpjDatpj" id="float-input-calendar" placeholder="__/__/____" name="dateDatepicker"
                  (changeDateValue)="changeValueManuelDatePJ($event, rowData);compareDataChange(rowData)" [showIcon]="true">
                </p-calendar>

              </div>

            </div>
          </ng-template>
          <ng-template pTemplate="output">
            <div>
              <span style="color: #0E70CA"> {{rowData.sinpjDatrecp | date: 'dd/MM/yyyy'}} </span>
            </div>
          </ng-template>
        </p-cellEditor>
      </td>
    </tr>
  </ng-template>
</p-table>

Мне удалось реализовать, но моя проблема в css, я пытаюсь это сделать, но я получил следующее:

enter image description here

это мой стиль. css файл: 

body .ui-table .ui-table-tbody > tr:nth-child(even).ui-state-highlight {
    background-color: #abb9d3 !important;
    color: #ffffff;
}
body .ui-table .ui-table-tbody > tr.ui-state-highlight:not(.dateFinElement) {
    background-color: #abb9d3 !important;
    color: #ffffff;
}

body .ui-table .ui-sortable-column.ui-state-highlight {
    background-color: #f4f4f4 !important;
    color: black;
}

моя версия Primeng - 7.1.3

...