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

Rendering

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

Spraddle

Thank you Pardeep, but as output I'm getting 05:30 Jan 01 1970 for 2015-05-18T02:30:56. How do I covert '2015-05-18T02:30:56' to 2015-05-18T02:30:56? – Rendering

you have to convert it using new Date () method and pass the required date as parameter. look at my plnkr i have update the code as you say. – Spraddle

newDate = new Date('2015-05-18T02:30:56'); like this. – Spraddle

Im new to Angular 2, issue is Im passing data from the class, how I convert it in html directives? Ex: <ion-card *ngFor="#appointment of appointments" (click)="itemTapped($event, appointment)"> .how do i covert appointment.DateSent to newDate? – Rendering

is it possible to declare new date() at the time of writing class data ? if so then just do it. otherwise i think you have to send date separately from the class by changing into Date type using new Date() . – Spraddle

Cant I have a method declare in class and return the converted date object to html? – Rendering

Let us continue this discussion in chat. – Spraddle

Thank you Pardeep for the help. I had to convert json response to get needed output. I created my own array from response, converting date object with new Date (date). I didnt have much time explore more easy options on this. – Rendering

Thanks, this set-get method perfect working for Angular 6 app in Chrome & Firefox (85.0.2 (64-bit)) – Fuhrman