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

score 9 · Accepted Answer · edited Oct 25 '18 at 23:55

9

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

edited Oct 25 '18 at 23:55

Kim Desrosiers

744
7
13

answered Feb 26 '16 at 05:52

Pardeep Jain

84,110
37
165
215

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? – happycoder Feb 26 '16 at 06:19
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. – Pardeep Jain Feb 26 '16 at 06:23
1

`newDate = new Date('2015-05-18T02:30:56');` like this. – Pardeep Jain Feb 26 '16 at 06:25
Im new to Angular 2, issue is Im passing data from the class, how I convert it in html directives? Ex: .how do i covert appointment.DateSent to newDate? – happycoder Feb 26 '16 at 06:36
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()` . – Pardeep Jain Feb 26 '16 at 06:42
Cant I have a method declare in class and return the converted date object to html? – happycoder Feb 26 '16 at 06:45
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/104609/discussion-between-pardeep-jain-and-kanishka-raveendra). – Pardeep Jain Feb 26 '16 at 06:46
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. – happycoder Feb 28 '16 at 05:59
1

Thanks, this set-get method perfect working for Angular 6 app in Chrome & Firefox (85.0.2 (64-bit)) – Pinaki Feb 11 '21 at 13:11

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

1 Answers1

update :

Linked