The specified Date value does not conform to the required format Angular 5

Question

In my Angular App , I am Showing data from API to component in input fields .

All fields are getting populated but not Input element with type Date

Below is html markup

<input [(ngModel)]="CustomerVM.customer.CustomerDob" type="date" name="MemberDateOfBirth" class="form-control" 
          (blur)="Calculate_Age(CustomerVM.customer.CustomerDob)">

In console it say

The specified value "2018-09-21T00:00:00" does not conform to the required format, "yyyy-MM-dd".

I made a common function to format date in a service as

FormatDate(iDate: Date) {
var inputDate:Date= new Date(iDate);
var formattedDate = new Date(inputDate.getUTCDate(), (inputDate.getUTCMonth() + 1), inputDate.getUTCFullYear());
return formattedDate;

}

and

this.CustomerVM.customer.CustomerDob = this.Helper.FormatDate(this.CustomerVM.customer.CustomerDob);

but it does not show value in date field

inside interpolation block we can format value by using pipes

{{DOB | date:'mediumDate'}}

Can we do this with ngModel too? cause I don't want a method to format it.

How can I achieve this ?

Newmint

Answer 1

Action expressions can not include pipes. You can implement more complex binding by splitting the two-way binding provided by [(ngModel)] into property-binding and event binding. The date pipe can then be included within the property-binding expression:

<input [ngModel]="item.value | date:'yyyy-MM-dd'" (ngModelChange)="item.value=$event" type="data" />

---

The input tag from your example would like something like the following:

<input [ngModel]="CustomerVM.customer.CustomerDob | date:'yyyy-MM-dd'" (ngModelChange)="CustomerVM.customer.CustomerDob=$event" type="date" name="MemberDateOfBirth" class="form-control" (blur)="Calculate_Age(CustomerVM.customer.CustomerDob)">

Gruver

Answer 2

Your service should have like this :

FormatDate(iDate: Date) {
   var inputDate = new Date(iDate);
   var formattedDate = inputDate.getFullYear()+'-'+(inputDate.getMonth() + 1)+'-'+ 
   inputDate.getDate();
   return formattedDate;
}

And In your ts file should have like this :

let newDate = new Date(this.CustomerVM.customer.CustomerDob);
this.CustomerVM.customer.CustomerDob = this.Helper.FormatDate(newDate);

Philosophism

Have you even tried this ? , I made little change here var formattedDate =new Date(inputDate.getFullYear(),(inputDate.getMonth() + 1), inputDate.getDate()); – Newmint

in console it print value in desired format but value in fields still not getting populated – Newmint

Answer 3

The response of date is in Timestamp format. Timestamp value not populated your date field so you need to convert timestamp format to date format.

var datePipe = new DatePipe("en-US"); let formatedyear = datePipe.transform(this.CustomerVM.customer.CustomerDob, 'MM/dd/yyyy'); this.CustomerVM.customer.CustomerDob = formatedyear;

then import { DatePipe } from '@angular/common'; in your component

Phylloid

Let me try this first – Newmint

does not actually fix the issue. I get the same warning, and the date input doesn't display the date i set – Chalkboard

Answer 4

Use ngValue

<input [(ngValue)]="CustomerVM.customer.CustomerDob" type="date" name="MemberDateOfBirth" class="form-control" (blur)="Calculate_Age(CustomerVM.customer.CustomerDob)">

Orangutan

Answer 5

as I saw it on their documentation, if you wish to use angular datepicker, you need to :

Fix

Remove the type="date" from the input

Explanation

HTML5 have it formatted as yyyy-MM-dd while angular have it as dd-MM-yyyy.

Lemay