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](http://stackoverflow.com/questions/37055311/angular2-how-to-use-javascript-date-object-with-ngmodel-two-way-binding) — Ankit Singh, Jul 04 '16 at 04:46

El houcine bougarfaoui · Answer 1 · 2017-11-22T17:54:01.107

97

Angular 2 , 4 and 5 :

the simplest way : plunker

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

edited Nov 22 '17 at 17:54

answered Mar 24 '17 at 15:52

El houcine bougarfaoui

35,805
9
37
37

I like the simplicity and this is the simplest one. Thanks. – newman Apr 10 '17 at 22:21
7

Quick and simple, but it throws localization out the window. – Maritim Aug 01 '17 at 09:58
Great solution ! Thanks – GCoe Oct 14 '17 at 20:41
what if I want dt to be of format 'dd-MM-yyyy', because $event is gives me date of format 'yyyy-MM-dd' even though I have set date pipe format to 'dd-MM-yyyy' – Rishabh Agrahari Oct 20 '17 at 06:13
it's impossible to change the format. take a look at this : https://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format – El houcine bougarfaoui Nov 14 '17 at 15:56
Is there a way to do this if it is a form control? – Mike Jerred Feb 01 '18 at 16:14
6

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 – alex Feb 24 '18 at 20:20
1

Agreed with @alex on this one. Manually typed dates mess up with this method. – Grungondola May 10 '18 at 15:29
@BougarfaouiElhoucine How should I use 'ngModel' if I am using FormControls in my template. It says I cannot use ngModel binding with FormControls. – Shiv Jun 07 '18 at 08:09
8

it gives Error :Cannot have a pipe in an action expression – Saurabh Oct 16 '18 at 06:08
1

@Saurabh, please look this: https://stackoverflow.com/questions/39642882/using-pipes-within-ngmodel-on-input-elements-in-angular – Boris Makhlin Nov 28 '20 at 09:03
In the ngModelChange, you assign a string to the original dt variable which is supposed to be a Date object. – marczellm Jun 12 '23 at 09:19

score 74 · Accepted Answer · edited May 29 '19 at 08:13

74

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 '19 at 08:13

Usama nadeem

411
7
15

answered Oct 06 '16 at 07:36

hakany

7,134
2
19
22

8

Thanks a lot, used with small change: `(input)="demoUser.date = $event.target.valueAsDate"` – Yuriy Rozhovetskiy Apr 20 '17 at 07:46
In this case its not possible to change the visible date from the component. – Mark May 07 '21 at 08:18

Matiullah Karimi · Answer 3 · 2020-01-14T05:57:46.033

28

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 '20 at 05:57

answered Jan 08 '18 at 10:36

Matiullah Karimi

1,234
1
15
17

1

typescript will have design time warning for assigning string to Date – xinqiu Jun 05 '18 at 09:57
1

In my case, new Date(myDate).toISOString().split('T')[0] worked! Thanks – rochasdv Feb 06 '19 at 10:26

score 13 · Answer 4 · edited Jul 23 '18 at 09:37

13

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 '18 at 09:37

jps

20,041
15
75
79

answered Jul 23 '18 at 09:00

user10121373

131
1
2

For some reason this is the only solution that works for me in Angular 15 (without using reactive forms) – Benjamin Martin Apr 25 '23 at 13:09

score 8 · Answer 5 · answered Jul 11 '18 at 10:24

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, [], []);  
}

score 6 · Answer 6 · answered Jul 04 '16 at 01:02

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. — Grungondola, May 18 '18 at 18:56

Shiv · Answer 7 · 2018-04-10T10:38:47.933

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 '18 at 10:38

answered Apr 09 '18 at 12:11

Shiv

3,069
1
24
17

2

`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](https://caniuse.com/#feat=input-datetime) – Grungondola May 18 '18 at 19:45

score 0 · Answer 8 · answered Sep 27 '17 at 21:19

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.

score -2 · Answer 9 · answered Mar 24 '17 at 16:48

-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 '17 at 16:48

tecnocrata

901
1
8
19

Could you please explain what (keyup) is doing? – Rishabh Agrahari Oct 20 '17 at 05:28
angular only updates the screen, if we do this binding source: https://angular.io/guide/user-input – tecnocrata Oct 20 '17 at 19:52

score -3 · Answer 10 · answered Apr 10 '19 at 15:32

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.

Angular 2 Date Input not binding to date value

10 Answers10

Linked