Angular 2 Date Input not binding to date value

Question

trying to get a form set up but for some reason, the Date input in my html is not binding to the object's date value, despite using [(ngModel)]

html:

<input type='date' #myDate [(ngModel)]='demoUser.date'/><br>

form component:

export class FormComponent {
    demoUser = new User(0, '', '', '', '', new Date(), '', 0, [], []);  
}

User class:

export class User {
    constructor (
        public id: number,
        public email: string,
        public password: string,
        public firstName: string,
        public lastName: string,
        public date: Date,
        public gender: string,
        public weight: number,
        public dietRestrictions: string[],
        public fitnessGoals: string[]
    ){

    }
}

A test output reveals the current "new" Date as the object's value, but the input doesn't update the User object's date value or reflect the value, suggesting neither of the two-way bindings are working. Help would be greatly appreciated.

Possible duplicate of Angular2: How to use JavaScript Date Object with NgModel two way binding — Ankit Singh
– Ankit Singh, Commented Jul 4, 2016 at 4:46

El houcine bougarfaoui · Accepted Answer · 2017-11-22 17:54:01Z

99

Angular 2 , 4 and 5 :

the simplest way : plunker

<input type="date" [ngModel] ="dt | date:'yyyy-MM-dd'" (ngModelChange)="dt = $event">

edited Nov 22, 2017 at 17:54

answered Mar 24, 2017 at 15:52

El houcine bougarfaoui

37.6k10 gold badges40 silver badges38 bronze badges

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

11 Comments

Maritim Over a year ago

Quick and simple, but it throws localization out the window.

alex Over a year ago

Your solution has bugs. Click the x to clear the date, then click on mm and start typing the following sequence: 1 - 1 - 1 - 1 - 2 - 0 - 1 - 7 to produce 11/11/2017 and the result is: mm/dd/0017, not 11/11/2017

Grungondola Over a year ago

Agreed with @alex on this one. Manually typed dates mess up with this method.

Saurabh Over a year ago

it gives Error :Cannot have a pipe in an action expression

Boris Makhlin Over a year ago

@Saurabh, please look this: stackoverflow.com/questions/39642882/…

|

Usama nadeem · Accepted Answer · 2019-05-29 08:13:26Z

75

Instead of [(ngModel)] you can use:

// view
<input type="date" #myDate [value]="demoUser.date | date:'yyyy-MM-dd'" (input)="demoUser.date=parseDate($event.target.value)" />

// controller
parseDate(dateString: string): Date {
    if (dateString) {
        return new Date(dateString);
    }
    return null;
}

You can also choose not to use parseDate function. In this case the date will be saved as string format like "2016-10-06" instead of Date type (I haven't tried whether this has negative consequences when manipulating the data or saving to database for example).

edited May 29, 2019 at 8:13

Usama nadeem

4517 silver badges15 bronze badges

answered Oct 6, 2016 at 7:36

hakany

7,2742 gold badges22 silver badges22 bronze badges

2 Comments

IUnknown Over a year ago

Thanks a lot, used with small change: (input)="demoUser.date = $event.target.valueAsDate"

Mark Over a year ago

In this case its not possible to change the visible date from the component.

Matiullah Karimi · Accepted Answer · 2020-01-14 05:57:46Z

30

In your component

let today: string;

ngOnInit() {
  this.today = new Date().toISOString().split('T')[0];
}

and in your html file

<input name="date" [(ngModel)]="today" type="date" required>

edited Jan 14, 2020 at 5:57

answered Jan 8, 2018 at 10:36

Matiullah Karimi

1,3141 gold badge17 silver badges20 bronze badges

2 Comments

xinqiu Over a year ago

typescript will have design time warning for assigning string to Date

David Rocha Over a year ago

In my case, new Date(myDate).toISOString().split('T')[0] worked! Thanks

jps · Accepted Answer · 2018-07-23 09:37:54Z

14

In .ts :

today: Date;

constructor() {  

    this.today =new Date();
}

.html:

<input type="date"  
       [ngModel]="today | date:'yyyy-MM-dd'"  
       (ngModelChange)="today = $event"    
       name="dt" 
       class="form-control form-control-rounded" #searchDate 
>

edited Jul 23, 2018 at 9:37

jps

22.9k18 gold badges91 silver badges119 bronze badges

answered Jul 23, 2018 at 9:00

user10121373

1411 silver badge2 bronze badges

1 Comment

Benjamin Martin Over a year ago

For some reason this is the only solution that works for me in Angular 15 (without using reactive forms)

M Rameez · Accepted Answer · 2018-07-11 10:24:15Z

8

use DatePipe

> // ts file

import { DatePipe } from '@angular/common';

@Component({
....
providers:[DatePipe]
})

export class FormComponent {

constructor(private datePipe : DatePipe){}

    demoUser = new User(0, '', '', '', '', this.datePipe.transform(new Date(), 'yyyy-MM-dd'), '', 0, [], []);  
}

answered Jul 11, 2018 at 10:24

M Rameez

1891 gold badge3 silver badges10 bronze badges

Comments

Andrei Zhytkevich · Accepted Answer · 2016-07-04 01:02:05Z

Angular 2 completely ignores type=date. If you change type to text you'll see that your input has two-way binding.

<input type='text' #myDate [(ngModel)]='demoUser.date'/><br>

Here is pretty bad advise with better one to follow:

My project originally used jQuery. So, I'm using jQuery datepicker for now, hoping that angular team will fix the original issue. Also it's a better replacement because it has cross-browser support. FYI, input=date doesn't work in Firefox.

Good advise: There are few pretty good Angular2 datepickers:

FYI: input=date works in Firefox 57+, but it does not work in IE or Safari. With IE still holding about 3% of browser usage, it's a bit of a headache still trying to support it at this point.

Shiv · Accepted Answer · 2018-04-10 10:38:47Z

6

As per HTML5, you can use input type="datetime-local" instead of input type="date".

It will allow the [(ngModel)] directive to read and write value from input control.

Note: If the date string contains 'Z' then to implement above solution, you need to trim the 'Z' character from date.

For more details, please go through this link on mozilla docs.

edited Apr 10, 2018 at 10:38

answered Apr 9, 2018 at 12:11

Shiv

3,3351 gold badge26 silver badges20 bronze badges

1 Comment

Grungondola Over a year ago

input type="date" still works as well. It is supported in every browser except for IE and Safari. type="datetime-local" is a different input type altogether and is also not supported in Firefox: link

Daniel Ashcraft · Accepted Answer · 2017-09-27 21:19:54Z

If you are using a modern browser there's a simple solution.

First, attach a template variable to the input.

<input type="date" #date />

Then pass the variable into your receiving method.

<button (click)="submit(date)"></button>

In your controller just accept the parameter as type HTMLInputElement and use the method valueAsDate on the HTMLInputElement.

submit(date: HTMLInputElement){
    console.log(date.valueAsDate);
}

You can then manipulate the date anyway you would a normal date.

You can also set the value of your <input [value]= "..."> as you would normally.

Personally, as someone trying to stay true to the unidirectional data flow, i try to stay away from two way data binding in my components.

tecnocrata · Accepted Answer · 2017-03-24 16:48:00Z

-2

you can use a workaround, like this:

<input type='date' (keyup)="0" #myDate [(ngModel)]='demoUser.date'/><br>

on your component :

 @Input public date: Date,

answered Mar 24, 2017 at 16:48

tecnocrata

8911 gold badge9 silver badges19 bronze badges

2 Comments

Rishabh Agrahari Over a year ago

Could you please explain what (keyup) is doing?

tecnocrata Over a year ago

angular only updates the screen, if we do this binding source: angular.io/guide/user-input

Deepak Bhattarai · Accepted Answer · 2019-04-10 15:32:25Z

-3

In Typescript - app.component.ts file

export class AppComponent implements OnInit {
    currentDate = new Date();
}

In HTML Input field

<input id="form21_1" type="text" tabindex="28" title="DATE" [ngModel]="currentDate | date:'MM/dd/yyyy'" />

It will display the current date inside the input field.

answered Apr 10, 2019 at 15:32

Deepak Bhattarai

12 bronze badges

Collectives™ on Stack Overflow

Angular 2 Date Input not binding to date value

10 Answers 10

11 Comments

2 Comments

2 Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

11 Comments

2 Comments

2 Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

2 Comments

Comments

Linked

Related