CODEWITHSUNDEEP
angularangular-materialangular-material-datetimepicker
user2304483
user2304483

Reputation: 1644

Why value is not populated inside the input in mat datepicker?

I have current template:

<input type="text" class="form-control" name="my_date" 
        [matDatepicker]="myDatepicker" #myDate="ngModel"        
        [(ngModel)]="myDateValue" id="my_date" required>                                        
    <mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>                                                                                
    <mat-datepicker #myDatepicker></mat-datepicker>

The init happen when loading the component:

public myDateValue: string;
    this.myDateValue= myMonth.toString() + "\/" + myDay.toString() + "\/" + myYear.toString();

When printing the date to the console I get to see it in the FormControl value. But when the page load the date is not populate into the textbox?

Any idea what I'm doing wrong ? Thanks.

Upvotes: 1

Views: 2766

Answers (2)

miri W.
miri W.

Reputation: 241

in my case it was that the binding to the value was like that:

<input type="text" class="form-control" name="my_date" 
    [matDatepicker]="myDatepicker" #myDate="ngModel"        
    [value]="myDateValue|date" id="my_date" required>                                        
<mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>                                                                                
<mat-datepicker #myDatepicker></mat-datepicker>

i removed the- | date

and then it worked

 <input type="text" class="form-control" name="my_date" 
    [matDatepicker]="myDatepicker" #myDate="ngModel"        
    [value]="myDateValue" id="my_date" required>                                        
<mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>                                                                                
<mat-datepicker #myDatepicker></mat-datepicker>

Upvotes: 0

user2304483
user2304483

Reputation: 1644

In order to solve this issue I had to change the myDateValue to type Date. That's solved the problem. mat datepicker require the field to be type Date.

Upvotes: 2

Related Questions