es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

No se puede obtener la directiva del datepicker de ngx-bootstrap usando ViewChild.

28 Jul, 2023 Programación

Quiero crear un selector de fechas que se oculte cuando ocurre el evento de desplazamiento.

  1. Consulté ngx-bootstrap-datepicker
  2. Funciona perfectamente en stackblitz, pero no en mi aplicación.
  3. 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);
}
}

  1. console.log(this.datepicker) siempre devuelve undefined…
Tags:  , ,

Answer

  1. Avatar for davy.ai
    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 entrada bsDatepicker.

    Así es como lo implementé:

    1. Consulté la documentación de ngx-bootstrap-datepicker para el evento onHidden (https://valor-software.com/ngx-bootstrap/#/datepicker#events), que se activa después de que el selector de fechas se haya ocultado.
    2. Añadí una función onHidden en mi componente que establece una variable booleana showDatepicker como false:
    onHidden(): void {
  this.showDatepicker = false;
}
    1. En la plantilla de mi componente, añadí el evento onHidden al elemento de entrada bsDatepicker:
    <input  ="" ...=""  ="" bsdatepicker=""  ="" #dp="bsDatepicker"  ="" (onhidden)="onHidden()"  ="" [isopen]="showDatepicker">
    1. Por último, añadí un escuchador de eventos scroll a la ventana en el constructor de mi componente, que cambia el valor de showDatepicker a false:
    constructor() {
  window.addEventListener('scroll', () => {
    this.showDatepicker = false;
  });
}

    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.

Comments are closed.