Set specific time in <input type="date"> with Angular

Question

I would like to set a specific Date programatically for my control with Angular2, but no matter how I try it, the input always displays "yyyy. mm. dd." in my browser.

Here's my code: HTML:

<input class="form-control" type="date" [(ngModel)]="dateFrom" name="dateFrom" min="2016-10-01" [value]="2016-10-01" />

Typescript

public dateFrom: Date;  
constructor() {
}
ngOnInit() {
    this.dateFrom = new Date(Date.parse("2016-10-01"));
}

Please note that min="date" and [value]="date" also didn't work in pure HTML code. Is there something I'm missing or it is a really bad idea, to set an input's value from code?

Eddie Martinez · Accepted Answer · 2017-03-24 15:34:11Z

2

If you need the value to be initialized from an Angular2 variable the input has to part of Angular2 form component, a model-driven form or template driven form. And the date input is expecting a string representation of a date, not the javascript date object

value = date # A string representing a date.

documentation

Change your code to use string like this:

TypeScript Component

public dateFrom: string =  "2016-10-01";

Html Component

<form #form="ngForm">
  <input type="date"  [(ngModel)]="dateFrom" name="dateFrom"/>
</form>

edited Mar 24, 2017 at 15:34

answered Mar 24, 2017 at 15:27

Eddie Martinez

13.9k15 gold badges86 silver badges109 bronze badges

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

Comments

El houcine bougarfaoui · Accepted Answer · 2017-03-24 15:54:15Z

0

this gonna work, see it in action here plunker

use date pipe, (ngModelChange) and [ngModel]:

  <input class="form-control" type="date" [ngModel] ="dateFrom | date:'yyyy-MM-dd'" (ngModelChange)="$event = dateFrom" name="dateFrom" min="2016-10-01" [value]="2016-10-01" />

edited Mar 24, 2017 at 15:54

answered Mar 24, 2017 at 15:28

El houcine bougarfaoui

37.6k10 gold badges40 silver badges38 bronze badges

Collectives™ on Stack Overflow

Set specific time in <input type="date"> with Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related