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
– Oliver, Commented Apr 11, 2018 at 7:08
Yes, I tried. But it always gives an error saying "Invalid Date". — PiyaModi
– PiyaModi, Commented Apr 11, 2018 at 23:53
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
– Oliver, Commented Apr 12, 2018 at 6:02

PiyaModi · Accepted Answer · 2018-04-24 00:27:30Z

1

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.

answered Apr 24, 2018 at 0:27

PiyaModi

2452 gold badges9 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related