Angular Material DatePicker Allow String value

Question

I am trying to keep the Angular Material Date picker input box and am type for DD/MMM/YYYY Or MMM/YYYY Or (any string value) require the user to click on button am get (any string value) and assign date picker input box

Html

<a mat-flat-button (click)="Datepiker()">s</a>
  </mat-icon>
  <input matInput
         placeholder="Course Completion" 
         formControlName="Completion" maxlength="60"
         #courseCompte
         (click)="course.open()"
         [matDatepicker]="course"
         (keyup)="Compte.value =Compte.value.toUpperCase()"/>
  <mat-datepicker #course></mat-datepicker>

Ts

Datepiker() { 
 this.mainForm.get(this.formgroupName).get('Completion').setValue("Provide");
}

could you please provide a stackblitz.com demo reproducing your issue? that would really be super helpful :) — Dario Piotrowicz
Also I don't understand what you're asking, could you please clarify? — Dario Piotrowicz
yeah thanks for spending your valuable time , i need string value bind in datepicker input box — HARIDHASS
Not a problem :) , but again I am sorry but I do not think I follow you, could you please provide a demo? or at the very least a screenshot saying what should do what (I can just simply copy paste your code somewhere since that does not contain all the code, for example there is no opening tag for the mat-icon element) — Dario Piotrowicz

Dario Piotrowicz Dario Piotrowicz · Accepted Answer · 2021-01-18T08:17:02

There's only a way that I came up with that would accomplish what (I think that) you want, and it's as follows:

You inject the component's element reference as:

constructor(private elemRef: ElementRef){}

and use that to get the native input that mat tries to abstract from you, once you have that element you can set it's input to whatever you want.

For example you can set it's value to 'is provided' in the following way:

 let inputElement = this.elemRef.nativeElement.querySelector('.mat-input-element.mat-datepicker-input');
 inputElement.value = 'is provided';

naturally the above code can be used in your onClick method changing the value of the element, like here: https://stackblitz.com/edit/angular-pfaxp1-fasyhy?file=src/app/datepicker-overview-example.ts

That being said, I find this solution very very ugly and hacking and I would not really want to use something like this unless I had absolutely no other choice.

Also note that the material field does not show any animation if you inject a value in the field directly as the animation is triggered by focus, so you will not get a nice animation unless you focus the element and wait for the animation to finish, as you can see here: https://stackblitz.com/edit/angular-pfaxp1-srcvv3?file=src/app/datepicker-overview-example.ts

All in all this is quite a bad solution but I think Material doesn't allow you to cleanly do what you want. I would suggest you to rethink your design and try an alternative and clean solution, if not possible I hope I gave you some ideas on how to somehow move forward :)

Angular Material DatePicker Allow String value

1 Answers