CODEWITHSUNDEEP
angulartypescriptangular5
Tanwer
Tanwer

Reputation: 1583

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

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 ?

Upvotes: 5

Views: 18231

Answers (5)

Rapha&#235;l Balet
Rapha&#235;l Balet

Reputation: 8481

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.

Upvotes: 0

Milo Kael
Milo Kael

Reputation: 1

Use ngValue

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

Upvotes: 0

Adrian Toman
Adrian Toman

Reputation: 11476

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)">

Upvotes: 6

Vinodha
Vinodha

Reputation: 9

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

Upvotes: 0

Shashikant Devani
Shashikant Devani

Reputation: 2455

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);

Upvotes: 0

Related Questions