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

Question

This seems to be a simple question. I'm using pipes in my Ionic 2 application for dates format. This is the recieved webservice reponse.

 [
  {
    "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 the code snippet I'm 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 a date format like this:

06:05
Dec
24
2015

Answer 1

You are passing wrong parameters so angular throwing error. changed your date code with this:

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 am using variable birthday instead of your variable name. Maybe the reason for the error is angular may not accept the format of date as a string. according to me. But as officials

• this pipe is marked as pure hence it will not be re-evaluated when the input is mutated. Instead, users should treat the date as an immutable object and change the reference when the pipe needs to re-run (this is to avoid reformatting the date on every change detection run which would 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 :

As Needed by @Kanishka yes you can update your date and transform into new date() from HTML side you have to call the setter and getter function of typescript for the same. here is an example of what you are looking for. so by using this, I don't think you have to need to create your own array from the response. I hope it may help you and suggest you one new method to play with the response from the 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 is Updated working demo http://plnkr.co/edit/rHCjevNcol12vwW6B38u?p=preview