参数'日期格式无效'用于管道' DatePipe&#39 ;?

时间:2016-02-26 05:37:24

标签: angular date-format ionic2 pipes-filters

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

 [
  {
    "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 AppointmentsPage@14:37]

我需要获得这样的日期格式:

06:05
Dec
24
2015

1 个答案:

答案 0 :(得分:6)

你输错了参数,所以角度抛出错误。用这个改变了你的日期代码:

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可能不接受日期格式作为字符串。据我说。但作为官员

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

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

更新:

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

<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