web-dev-qa-db-fra.com

Comment personnaliser le datepicker ngx-bootstrap

Je souhaite personnaliser le menu contextuel ngx-bootstrap datepicker. Fondamentalement, je veux ajouter un lien/bouton dans le calendrier indiquant la date et sur un clic de cette date sera ajouté au champ sélecteur de date.

Je n'ai trouvé aucun moyen de personnaliser le sélecteur de date. J'utilise Angular 5 et ngx-bootstrap: https://valor-software.com/ngx-bootstrap/#/datepicker

Merci d'avance.

angulardatepickerangular5customizationngx-bootstrap
3
sandip

Vous pouvez créer un composant personnalisé en fonction du datepicker d'origine en ajoutant un élément personnalisé au modèle, ce qui lui donne l'aspect d'un élément intégré avec certains css:

 enter image description here

Commencez par changer la hauteur du popup datepicker:

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

Ajoutez ensuite l'élément personnalisé au sélecteur de date:

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

Avec quelques css:

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

Voici une démo de stackblitz en cours d'exécution.

Une meilleure solution serait d'avoir la possibilité de transmettre un modèle au datepicker, mais ngx-bootstrap ne semble pas le supporter.

4
ibenjelloun

fichier css 

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

ouvrir le fichier css

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

recherchez la classe css que vous souhaitez modifier à l'aide d '"éléments de contrôle" Recherchez ensuite la classe dans bs-datepicker.css et changez Par exemple, je souhaite modifier l'en-tête de couleur verte en bleu. 

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

     }

Je change la couleur de fond de l'en-tête 

1
Nadeem Qasmi