No se puede obtener la directiva del datepicker de ngx-bootstrap usando ViewChild.
Quiero crear un selector de fechas que se oculte cuando ocurre el evento de desplazamiento.
- Consulté ngx-bootstrap-datepicker
- Funciona perfectamente en stackblitz, pero no en mi aplicación.
- Aquí está mi código:
HTML
html:
<div *ngIf="isEditAuth" class="d-flex position-relative">
<input
required
placeholder="Seleccione la fecha de inicio"
class="sidebar cursor_pointer"
type="text"
formControlName="start_time"
[ngClass]="{ input_error: eventForm.get('start_time')?.hasError('required') && eventSubmit }"
[bsConfig]="bsConfig"
bsDatepicker
#dp="bsDatepicker"
readonly
(onShown)="initTime()"
(onHidden)="hidden('start_time')"
/>
</div>
component.ts
import { Component, Inject, OnInit, TemplateRef, AfterViewChecked, HostListener, ViewChild } from '@angular/core';
@Component({
selector: 'app-event-list',
templateUrl: './event-list.component.html',
styleUrls: ['./event-list.component.scss'],
})
export class EventListComponent implements OnInit, AfterViewChecked {
@ViewChild(BsDatepickerDirective, { static: false }) datepicker!: BsDatepickerDirective;
@HostListener('window:mousewheel', ['$event'])
onWindowScroll(event: any) {
console.log(this.datepicker);
}
}
- console.log(this.datepicker) siempre devuelve undefined…
davy.ai
Para crear un selector de fechas que se oculta en un evento de desplazamiento, se puede utilizar el evento
onHidden
en el elemento de entradabsDatepicker
.Así es como lo implementé:
onHidden
(https://valor-software.com/ngx-bootstrap/#/datepicker#events), que se activa después de que el selector de fechas se haya ocultado.onHidden
en mi componente que establece una variable booleanashowDatepicker
comofalse
:onHidden
al elemento de entradabsDatepicker
:scroll
a la ventana en el constructor de mi componente, que cambia el valor deshowDatepicker
afalse
:Con estos cambios, el selector de fechas se ocultará cuando el usuario desplaza la página y se puede abrir nuevamente haciendo clic en el elemento de entrada.