angularangular-materialdatepickerbuttonclick

How to display datepicker on button click in angular?

I want the datepicker to be displayed on click of button and when I select the date it should display in textbox using angular.Pls help me solve this as on button click no datepicker is opened

<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>

Function Call:

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

  • You can use the open() method on the MatDatepicker.

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