管道'DatePipe'的参数'日期格式'无效?

问题描述:

这似乎是一个简单的问题。我在我的Ionic 2应用程序中使用管道进行日期格式化。这是接收到的web服务响应。管道'DatePipe'的参数'日期格式'无效?

[ 
    { 
    "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": [ 

    ]} 
    ] 

这是我正在使用的代码片段。

<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 [email protected]:37] 

我需要得到一个日期格式是这样的:

06:05 
Dec 
24 
2015 

您传递错误的参数,所以角投掷的错误。改变你的日期代码与此:

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 insted的您的变量名。 可能是错误的原因是角度可能不接受日期为格式的字符串。根据me.But作为官员

  • 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

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

更新:

需要时由@Kanishka是你可以更新日期和HTML侧变成new date()你必须调用typecript的setter和getter函数相同。这里是你正在寻找的例子。所以通过使用这个我不认为你需要从repsonse创建你自己的数组。我希望它可以帮助你,并建议你一个新的方法来玩前端的回应。

<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

+0

谢谢Pardeep,但作为输出我越来越05:30 1970年1月1日为2015-05-18T02:30:56。我如何转换'2015-05-18T02:30:56'至2015-05-18T02:30:56? – happycoder

+0

您必须使用新的Date()方法将其转换并将所需的日期作为参数传递。看看我的plnkr我已经更新了你说的代码。 –

+1

'newDate = new Date('2015-05-18T02:30:56');'像这样。 –