Angular 2/4/5 - Bind UTC formatted date to datepicker

Question

I am very new to Angular and Angular Material.

For the dates my backend wants it to be in zonedDate Format. (e.g.: 2018-04-11T02:12:04.455Z[UTC])

So I am getting value in the above format, which is not binding to mat-datepicker.

Here is html code:

<mat-form-field class="fx-cell-1" floatLabel="never">
    <input matInput name="myDate" [matDatepicker]="myDate" placeholder="Date of Expense"
    [(ngModel)]="myDate" #myDate="ngModel" [max]="maxDate" required >
    <mat-datepicker-toggle matSuffix [for]="myDate"></mat-datepicker-toggle>
    <mat-datepicker #myDate></mat-datepicker>
</mat-form-field>

So here ngModel is not binding value to datepicker.

After some more observation, I realized that:

The date with value "2018-04-11T02:12:04.455Z[UTC]" is binding to the datepicker.

The date with value "2018-04-02T14:00Z[UTC]" is not binding to the datepicker.

Any suggestion???

if your date is a simple string, did you try to wrap it into a new Date('myDate') before using it in your datepicker? — Oliver
Yes, I tried. But it always gives an error saying "Invalid Date". — PiyaModi
I tried both strings in new Date(), but both saying Invalid Date. After removing the [UTC] from the string, both would be correctly read as a date time instance in UTC time. So simply strip of the brackets part and everything should work. — Oliver

PiyaModi PiyaModi · Accepted Answer · 2018-04-24T00:27:30

So, basically, you can convert this date with javascript function toISOString().

or just by creating new Date() object.

In my case date was converting into some wrong format and so was getting an error.

Angular 2/4/5 - Bind UTC formatted date to datepicker

1 Answers