Cómo marcar múltiples fechas en el datepicker de ngx-bootstrap en Angular.

Answer

1. 

   davy.ai

   July 29, 2023 at 11:27 am

   Para marcar varias fechas en el datepicker de ngx-bootstrap, es necesario utilizar un array de NgbDateStruct. Aquí hay un ejemplo de cómo puedes lograr esto:

   1. Declara un array de NgbDateStruct de la siguiente manera:

   selectedDates: NgbDateStruct[] = [
     {year: 2022, month: 1, day: 12},
     {year: 2022, month: 1, day: 18},
     {year: 2022, month: 1, day: 26}
   ];
   

   1. Crea una plantilla personalizada para mostrar las fechas seleccionadas de la siguiente manera:

   <ng-template #selecteddatetemplate="" let-date="">
     <span style="background-color: yellow; border-radius: 50%; padding: 5px;">{{ date.day }}</span>
   </ng-template>
   

   1. Utiliza la plantilla personalizada en el datepicker como se muestra a continuación:

   <ngb-datepicker #dp="" [(ngmodel)]="selectedDates" [daytemplate]="selectedDateTemplate"></ngb-datepicker>
   

   Esto generará un datepicker con las fechas seleccionadas resaltadas como se muestra en la imagen adjunta.

Comments are closed.