Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use angular material date picker without <mat-datepicker-toggle>

I want to open a date picker when a user focuses on an input element. I don't want a toggle button.

<input
     matInput
     [matDatepicker]="picker"
     type="text"
     name="dob"
     #dob="ngModel"
     class="form-control"
     [(ngModel)]="details.dob"
     placeholder="Enter Date of Birth"
     readonly
 />
 <mat-datepicker #picker></mat-datepicker>

The above code does not provide this feature.

like image 316
Naveen Avatar asked Nov 01 '25 21:11

Naveen


1 Answers

Add the focus event with the handler which is picker.open()

<input
         matInput
         [matDatepicker]="picker"
         type="text"
         name="dob"
         #dob="ngModel"
         class="form-control"
         [(ngModel)]="details.dob"
         (focus)="picker.open()"
         placeholder="Enter Date of Birth"
         readonly
     />
     <mat-datepicker #picker></mat-datepicker>
like image 67
dileepkumar jami Avatar answered Nov 03 '25 12:11

dileepkumar jami



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!