管道'DatePipe'的参数'日期格式'无效？ [英] Invalid argument 'date format' for pipe 'DatePipe'?

问题描述

这似乎是一个简单的问题。我在Ionic 2应用程序中使用管道作为日期格式。这是收到的webservice响应。

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>

错误：

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

推荐答案

您传递错误的参数，因此角度投掷错误。更改了您的日期代码：

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

这里我使用变量名称的变量 birthday 。
可能是错误的原因是angular可能不接受日期格式为字符串。据我说。但作为官员

Here i am using variable birthday insted of your variable name. may be the reason for error is angular may not accept the format of date as string. according to me.But as officials

• 这个管道标记为纯，因此不会重新评估当输入发生变异时。相反，用户应将日期视为不可变对象，并在管道需要重新运行时更改引用（这是为了避免在每次更改检测运行时重新格式化日期，这将是一项昂贵的操作）。
  https://angular.io/docs/ts /latest/api/common/DatePipe-class.html

• 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

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

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

正如@Kanishka所需，您可以更新日期并转换为 new date（）从HTML方面你必须调用打字稿的setter和getter函数。这是你要找的例子。所以通过使用这个我不认为你需要从repsonse创建自己的数组。我希望它可以帮助你并建议你使用一种新的方法来玩前端的响应。

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 example of what you are looking for. so by using this i don't think you have need to create your own array from repsonse. i hope it may help you and suggest you one new method to play with response 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)
  }

这里是更新的工作演示 http： //plnkr.co/edit/rHCjevNcol12vwW6B38u?p=preview

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

这篇关于管道'DatePipe'的参数'日期格式'无效？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！