如何在按钮单击时显示日期选择器？

Posted 2023-05-07

【中文标题】如何在按钮单击时显示日期选择器？

【英文标题】：How to display datepicker on button click in angular?

【发布时间】：2022-01-07 03:05:22

【问题描述】：

我希望 datepicker 在单击按钮时显示，并且当我使用 angular 选择它应该在文本框中显示的日期时。请帮助我解决此问题，因为单击按钮时没有 datepicker已打开

<button type="button" class="btn btn-icon waves-effect waves-light btn-success" 
                        click="getReport()">
                  <i class="fas fa-info-circle"></i>
</button>
            
<mat-form-field>
    <input matInput type="text" class="form-content" id="pickDate" placeholder="Date" 
           [(ngModel)]="selectedFromDate" bsDatepicker [ngModelOptions]="standalone: true"
           [bsConfig]=" isAnimated: true,adaptivePosition: true,containerClass:'theme-red',dateInputFormat: 'MM/DD/YYYY', selectFromOtherMonth: 'true'"
           (ngModelChange)="setFromDate($event)" required autocomplete="off">                 
  </mat-form-field> 

函数调用：

async getReport() 
    $(".btn-success").datepicker('show');
  

【问题讨论】：

文档告诉你如何做到这一点：material.angular.io/components/datepicker/…

【参考方案1】：

您可以在MatDatepicker 上使用open() 方法。

<mat-form-field>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button (click)="picker.open()">Open</button>