Angular and input type Date won't display date assigned in format with T

Question

I have application in Angular 8, I have input type date binded with property Date from object in Angular:

 <input type="date" [(ngModel)]="day.dayValue"  class="form-control" [disabled]="false"/>

And the DayDTO object in TypeScript:

export class DayDTO {
  id: number;
  name: string;
  dayValue: Date;
}

When I set value in this input by hand the property dayValue is set. But when I want to set input type text by assigning:

this.day.dayValue = res.dayValue

when dayValue comes from controller written in .NET Core:

the input type Date isn't set. When I remove T00:00:00 in string, the input type Date is set

Only works when I remove T00:00:00

Khalid Sheet · Accepted Answer · 2020-11-29 20:04:57Z

2

Use the date Pipe in your date input

Like this

"day.dayValue | date: 'yyyy-MM-dd'"

Full code [Edited]

<input
  type="date"
  [(ngModel)]="day.dayValue"
  [ngModel]="day.dayValue | date: 'yyyy-MM-dd'"
  [disabled]="false"
/> />

Notice that I added both [ngModel] and [(ngModel])

You can take this and place it instead of your input and it will work.

answered Nov 29, 2020 at 15:46

Khalid Sheet

765 bronze badges

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

3 Comments

Doesn't work: Parser Error: Cannot have a pipe in an action expression at column 16 in [day.dayValue | date: 'yyyy-MM-dd'=$event]

Thanks, but unfortunatly doesn't work too :(

Hey, sorry for that, here is a link for an example, it worked. Notice that the order of the attributes in the date input is matter.