CODEWITHSUNDEEP
htmlangulardatepicker
Daniyar Changylov
Daniyar Changylov

Reputation: 568

How to call datepicker by clicking on input Angular

This is html file:

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

and datepicker is calling by clicking to icon (mat-datepicker-toggle). -> enter image description here

but I want that datepicker will be called by clicking to input without icon like this enter image description here

Here is example angular datepicker -> https://stackblitz.com/angular/xvjleypolka?file=src%2Fapp%2Fdatepicker-overview-example.html If you have another way to integrate datepicker to input in angular welcome

Upvotes: 0

Views: 2514

Answers (3)

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

MatDatePicker have open method to open it manually.

So just use it on focus of an input (focus)="picker.open()"

<mat-form-field>
  <input matInput (focus)="picker.open()" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Upvotes: 1

Adrita Sharma
Adrita Sharma

Reputation: 22213

You can just add (focus)="picker.open()"

Try like this:

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date"  (focus)="picker.open()">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Working Demo

Upvotes: 1

coder
coder

Reputation: 8702

Use like bellow:

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date" 
  (click)="picker.open()">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Working DEMO

Upvotes: 2

Related Questions