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.
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:
Ä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.
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