Invalid argument 'date format' for pipe 'DatePipe'?

Question

This seems to be a simple question. I use pipes in my Ionic 2 application for date format. This is the webservice response received.

[ { "MessageID": 544882, "CategoryID": 1, "DateSent": "2015-05-18T02:30:56", "Title": "Jobseeker App", "MessageContent": "Hi Test guy just started to use the app..", "Sender": null, "Recipient": null, "DateReceived": null, "DateRead": "2015-05-18T02:30:56", "Note_Direction": "sent", "Viewed": 0, "AppointmentDateTime": null, "MessageAttachments": [ ] }, { "MessageID": 544886, "CategoryID": 1, "DateSent": "2015-05-18T02:42:45", "Title": "Jobseeker App", "MessageContent": "App", "Sender": null, "Recipient": null, "DateReceived": null, "DateRead": "2015-05-18T02:42:45", "Note_Direction": "sent", "Viewed": 0, "AppointmentDateTime": null, "MessageAttachments": [ ]} ] 

This is a piece of code that I am using.

 <div class="Date"> <label class="time">{{appointment.DateSent | date:"HH"}}:{{appointment.DateSent| date:"mm"}}</label> <label class="month">{{appointment.DateSent| date:"MMM"}}</label> <label class="day">{{appointment.DateSent| date:"dd"}}</label> <label class="year">{{appointment.DateSent| date:"yyyy"}}</label> </div> 

Error:

 Invalid argument '2015-05-18T02:30:56' for pipe 'DatePipe' in [{{appointment.DateSent | date:"HH"}}:{{appointment.DateSent| date:"mm"}} in AppointmentsPage@14 :37] 

I need to get the date format as follows:

 06:05 Dec 24 2015 

Answer 1

You are passing the wrong parameters, so angular throwing error. changed your date code as follows:

 birthday = 2015-05-18T02:30:56 //Working birthday2 = new Date(2015-05-18T02:30:56) //Working Oldbirthday = '2015-05-18T02:30:56' //Not Working 

Here I use the birthday insted variable of your variable name. may be the cause of the error angular may not accept the date format as a string. according to me. But as officials

• this channel is marked as clean, so it will not be reevaluated when the input is mutated. Instead, users should consider the date as an immutable object and change the link when the pipe needs to be restarted (this avoids reformatting the date with each change detection run, which will be an expensive operation). https://angular.io/docs/ts/latest/api/common/DatePipe-class.html

working plnkr http://plnkr.co/edit/b9Z090rQpozMoMi0BWaY?p=preview

update:

According to the requirements of @Kanishka yes, you can update your date and convert it to new date() from the HTML side, for this you must call the setter and getter typescript function. here is an example of what you are looking for. therefore, using this, I don't think you need to create your own array from the answer. I hope this helps you and offers you one new method for playing with an answer from Front End.

 <label>{{setDate('2015-05-18T02:30:56') | date:"yyyy"}}</label> get Anotherdate(){ //getter function return this.date } setDate(date) { this.Anotherdate = date; return this.Anotherdate; } set Anotherdate(date){ // Setter Function this.abc = new Date(date) } 

here a working demo is updated http://plnkr.co/edit/rHCjevNcol12vwW6B38u?p=preview