Estoy usando el selector de fechas bootstrap4 https://ng-bootstrap.github.io/#/components/datepicker
Quiero cerrar datepicker de fechas cuando haga clic fuera del calendario. En este momento, cuando el usuario seleccione la fecha, se cerrará.
Mi código de archivo HTML está a continuación:
<input ngbDatepicker #d="ngbDatepicker" (click)="d.toggle();" [formControl]="eventForm.controls['event_date']" value="12/03/2017" type="text" [readonly]="true" autocomplete="off"> Intento agregar (click)="d.close();" en la etiqueta del cuerpo. Pero también está cerca cuando trato de cambiar el mes y el año del calendario.
¿Qué cambio tengo que hacer en HTML o component para cerrar este datepicker de fecha cuando el usuario hace clic fuera del calendario?
Sí, tuve el mismo problema... Esto funciona bien para mí:
componente HTML:
<input placeholder="{{ task.deadline.year }}-{{ task.deadline.month }}-{{ task.deadline.day }}" name="date" id="date" [(ngModel)]="task.deadline" ngbDatepicker #d="ngbDatepicker" (click)="!completed && d.toggle(); $event.stopPropagation();" (document:click)="closeFix($event, d)" readonly>y el TS (lo único que necesita es la función closeFix()):
closeFix(event, datePicker) { if(event.target.offsetParent == null) datePicker.close(); else if(event.target.offsetParent.nodeName != "NGB-DATEPICKER") datePicker.close(); }Puede usar el evento on-mouseleave para cerrar el selector de fecha cuando el usuario deja el div
<input on-mouseleave="d.close()" ngbDatepicker #d="ngbDatepicker" (click)="d.toggle();" [formControl]="eventForm.controls['event_date']" value="12/03/2017" type="text" [readonly]="true" autocomplete="off">¡Que tengas un lindo día!
En su componente.ts,
import { ViewChild } from '@angular/core'; @Component({ host: { '(document:click)': 'closeDatepicker($event)', } }) export class MyComponent { @ViewChild('d') eventDate; closeDatepicker(e) { if (!this.eventDate.isOpen() || (e.target.id === 'd' && e.target.id === 'dropdown-icon') || (e.target.offsetParent && e.target.offsetParent.localName.includes('ngb-datepicker')) || !(e.target.parentElement && e.target.parentElement.parentElement && !e.target.parentElement.parentElement.localName.includes('ngb-datepicker'))) { return; } if (this.eventDate.isOpen() && e.target.id !== 'd' && e.target.id !== 'dropdown-icon') { this.eventDate.close(); } } }