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
– Dario Piotrowicz, Commented Jan 13, 2021 at 14:44
Also I don't understand what you're asking, could you please clarify? — Dario Piotrowicz
– Dario Piotrowicz, Commented Jan 13, 2021 at 14:45
yeah thanks for spending your valuable time , i need string value bind in datepicker input box — HARIDHASS
– HARIDHASS, Commented Jan 13, 2021 at 16:06
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, Commented Jan 13, 2021 at 16:34

Dario Piotrowicz · Accepted Answer · 2021-01-18 21:34:00Z

1

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

edited Jan 18, 2021 at 21:34

answered Jan 18, 2021 at 8:17

Dario Piotrowicz

1,1421 gold badge10 silver badges18 bronze badges

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

6 Comments

HARIDHASS Over a year ago

@DarioPiotrowiz we need string value like this.test = "Is Provide" stackblitz.com/edit/…

Dario Piotrowicz Over a year ago

I see... I didn't get that.... I don't think that is possible... I will try to think of that and come back to you and if I get anywhere I will update my answer :)

Dario Piotrowicz Over a year ago

Ok I think I found the solution, updating the answer now

HARIDHASS Over a year ago

Hi @Dario Piotrowicz Only manual date update is not suffice to proceed. We need both the ways to update the date details in the (manual & select option & string value).

Dario Piotrowicz Over a year ago

Mh... please have a look at the "Datepicker input and change events" example here: material.angular.io/components/datepicker/examples is this what you want? getting the strings and handling them?

|

Collectives™ on Stack Overflow

Angular Material DatePicker Allow String value

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related