CODEWITHSUNDEEP
angularangular-materialdatepickerbuttonclick
Daffodil s
Daffodil s

Reputation: 21

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

Upvotes: 2

Views: 6247

Answers (2)

Amin
Amin

Reputation: 31

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

Upvotes: 0

JayNews
JayNews

Reputation: 61

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>

Upvotes: 2

Related Questions