How to display datepicker on button click in angular?

Question

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');
  }

The documentation tells you how to do this: material.angular.io/components/datepicker/… — AVJT82
– AVJT82, Commented Nov 30, 2021 at 11:52

JayNews · Accepted Answer · 2021-11-30 12:04:32Z

2

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>

answered Nov 30, 2021 at 12:04

JayNews

611 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Deviprasad Sharma Over a year ago

It doesn't work I think

Amin · Accepted Answer · 2023-09-26 08:39:12Z

0

I faced a similar problem with the original input element but couldn't find a solution. Sharing it here in case others have encountered the same issue.

If you are working with Typescript and using the HTMLInputElement type, and you need to open the date picker when clicking on another element, you can achieve this by calling the showPicker() method on the element, the date picker will be opened:

const datePickerInput = document.querySelector('.input_date-picker') as HTMLInputElement;
datePickerInput.showPicker();

reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#:~:text=does%20not%20validate.-,showPicker(),-Shows%20a%20browser

answered Sep 26, 2023 at 8:39

Amin

313 bronze badges

Collectives™ on Stack Overflow

How to display datepicker on button click in angular?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related