How to call datepicker by clicking on input Angular

Question

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

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

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

Possible duplicate of stackoverflow.com/questions/46344213/… — hbamithkumara
– hbamithkumara, Commented Dec 10, 2019 at 6:54

coder · Accepted Answer · 2019-12-10 06:53:30Z

2

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

answered Dec 10, 2019 at 6:53

coder

8,74216 gold badges41 silver badges54 bronze badges

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

Comments

Adrita Sharma · Accepted Answer · 2019-12-10 06:54:20Z

1

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

answered Dec 10, 2019 at 6:54

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

2 Comments

Daniyar Changylov Over a year ago

I guess i can also add (click)="picker.open()" ?

DGarvanski Over a year ago

Using (click)="picker.open()" would actually be better, in my opinion. This way it will open the DatePicker every time you click on the input. Otherwise, if the input field is already focused, the DatePicker will not open on click.

Surjeet Bhadauriya · Accepted Answer · 2019-12-10 08:30:47Z

1

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>

edited Dec 10, 2019 at 8:30

answered Dec 10, 2019 at 6:53

Surjeet Bhadauriya

7,2223 gold badges39 silver badges54 bronze badges

Collectives™ on Stack Overflow

How to call datepicker by clicking on input Angular

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related