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    lt input type  date   myDate   ngModel    demoUser date   gt  lt br gt    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

User · Answer

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

User · Answer

In  ts       today  Date   constructor            this today  new Date         html    lt input type  date            ngModel   today   date  yyyy-MM-dd             ngModelChange   today    event             name  dt          class  form-control form-control-rounded   searchDate   gt

User · Answer

Angular 2 completely ignores type date  If you change type to text you ll see that your input has two-way binding    lt input type  text   myDate   ngModel    demoUser date   gt  lt br gt    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    https   github com emirdeliz meus-projetos tree master angular2-schedule app frontend components datepicker https   github com MrPardeep Angular2-DatePicker https   www npmjs com package ng2-datepicker

User · Answer

Angular 2   4 and 5    the simplest way   plunker   lt input type  date   ngModel    dt   date  yyyy-MM-dd    ngModelChange   dt    event  gt

User · Answer

If you are using a modern browser there s a simple solution   First  attach a template variable to the input    lt input type  date   date   gt    Then pass the variable into your receiving method    lt button  click   submit date   gt  lt  button gt    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  lt input  value         gt  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

User · Answer

In your component  let today  string   ngOnInit       this today   new Date   toISOString   split  T   0       and in your html file   lt input name  date    ngModel    today  type  date  required gt

User · Answer

In Typescript - app component ts file  export class AppComponent implements OnInit       currentDate   new Date        In HTML Input field   lt input id  form21 1  type  text  tabindex  28  title  DATE   ngModel   currentDate   date  MM dd yyyy     gt    It will display the current date inside the input field

User · Answer

use DatePipe   gt     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

User · Answer

Instead of   ngModel   you can use      view  lt input type  date   myDate  value   demoUser date   date  yyyy-MM-dd    input   demoUser date parseDate  event target value     gt      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

User · Answer

you can use a workaround  like this    lt input type  date   keyup   0   myDate   ngModel    demoUser date   gt  lt br gt    on your component      Input public date  Date

[html] Angular 2 Date Input not binding to date value

Examples related to html

Examples related to angular

Examples related to typescript

Examples related to angular2-forms