wake-up-neo.com

Wie man den ngx-bootstrap datepicker anpasst

Ich möchte das ngx-bootstrap datepicker-Popup anpassen. Grundsätzlich möchte ich einen Link/Button in den Kalender einfügen, der das Datum zeigt. Wenn Sie auf dieses Datum klicken, wird das Datumsauswahlfeld hinzugefügt.

Ich habe keine Möglichkeit gefunden, den Datepicker anzupassen. Ich verwende Angular 5 und ngx-bootstrap: https://valor-software.com/ngx-bootstrap/#/datepicker

Danke im Voraus.

angulardatepickerangular5customizationngx-bootstrap
3
sandip

Sie könnten eine benutzerdefinierte Komponente basierend auf dem ursprünglichen Datepicker erstellen, indem Sie der Vorlage ein benutzerdefiniertes Element hinzufügen, wodurch es wie ein integriertes Element mit einigen CSS aussieht:

 enter image description here

Ändern Sie zunächst die Höhe des Datepicker-Popup:

::ng-deep.bs-datepicker {
  height: 350px;
}

Fügen Sie dem Datepicker dann das benutzerdefinierte Element hinzu:

<div class="container">
    <input type="text" #dp="bsDatepicker" bsDatepicker [(bsValue)]="myDateValue">
    <div class="custom-content" *ngIf="dp.isOpen">
        <a (click)="customAction()">{{myDateValue | date:'short'}}</a>
    </div>
</div>

Mit einigen css:

.custom-content {
  position: absolute;
  z-index: 1081;
  top: 390px;
  cursor: pointer;
  align-self: center;
}

Hier ist eine laufende Stackblitz-Demo.

Eine bessere Lösung wäre die Möglichkeit, eine Vorlage an datepicker zu übergeben, aber ngx-bootstrap scheint das nicht zu unterstützen.

4
ibenjelloun

cSS-Datei 

      "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"

css-Datei öffnen

     node_modules -> ngx-bootsrap -> datapicker -> bs-datepicker.css class

finden Sie die zu ändernde css-Klasse mit "inspect elements" suchen Sie dann die Klasse in bs-datepicker.css und ändern Sie Zum Beispiel möchte ich die Headerfarbe grün in blau ändern 

    .theme-green .bs-datepicker-head {
      // background-color :#green;  
      background-color: #4498fb;

     }

Ich ändere die Hintergrundfarbe der Kopfzeile 

1
Nadeem Qasmi