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.

¿Cómo mostrar el datepicker al hacer clic en un botón en Angular?

12 Jun, 2023 Programación

Quiero que el datepicker sea mostrado cuando se haga clic en el botón y que la fecha seleccionada se muestre en el cuadro de texto utilizando Angular. Por favor, ayúdeme a resolver esto ya que cuando hago clic en el botón, no se abre ningún datepicker.

Llamada a función:

async getReport() {
    $(".btn-success").datepicker('show');
  }
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar el selector de fechas al hacer clic en un botón y mostrar la fecha seleccionada en un cuadro de texto utilizando Angular, puede actualizar el código HTML de la siguiente manera:

    <button type="button" class="btn btn-icon waves-effect waves-light btn-success" (click)="showDatepicker()">
    <i class="fas fa-info-circle"></i>
</button>

<mat-form-field>
    <input matinput="" type="text" class="form-content" id="pickDate" placeholder="Fecha" [(ngmodel)]="selectedDate" [matdatepicker]="picker" required="" autocomplete="off">
    <mat-datepicker #picker=""></mat-datepicker>
</mat-form-field>

    En el evento de clic del botón, puede llamar al método open() del MatDatepicker para mostrar el selector de fechas:

    showDatepicker() {
    this.picker.open();
}

    También puede establecer la fecha seleccionada en la variable selectedDate utilizando el evento dateChange del MatDatepicker de la siguiente manera:

    <mat-datepicker #picker="" (datechange)="setSelectedDate($event)"></mat-datepicker>

...

setSelectedDate(event: MatDatepickerInputEvent<date>) {
    this.selectedDate = event.value;
}

    De esta manera, cuando el usuario seleccione una fecha en el selector de fechas, esta se mostrará en el cuadro de texto.

Comments are closed.