Angular2 - Issue with Date pipe

Question

I am trying to format the date time that I fetch from the DB in the following format:

15/09/2016, 20:45

However using the default date Pipe provided by Angular2, I get the following (When I run on a real device) However, On the browser it shows the correct format:

15/09/2016, 20:8:45 PM

Here is how I am formatting it in the HTML side:

{{ order.time | date:"dd/MM/y, HH:mm" }}

Any ideas on what's wrong?

When you fetch date, do you get it in string type or date type? — micronyks, Sep 15 '16 at 18:55
@micronyks what do you mean by date type? in JSON it will be in string format only right? — Deendayal Garg, Sep 15 '16 at 19:00
@HamzaL. [See my answer here](http://stackoverflow.com/a/38352762/1375316). — trey-jones, Sep 15 '16 at 19:40

score 0 · Answer 1 · answered Sep 15 '16 at 19:09

0

There are many ways to do it. You have to make sure that date which you fetch must be in date format. If it is, it will work properly with date pipe. If it is not you have to make sure that you convert it in to date as shown below. (This may help you to understand what I mean)

Working Demo : https://plnkr.co/edit/aaFu5G759ghUQvk1a9Zw

import { Component } from '@angular/core';
import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
@Component({
  selector: 'my-app',
  template: `      
  {{date|date:"dd/MM/y, HH:mm"}} //<----- here make sure date variable has proper date(type)
  `
})
export class AppComponent { 

  date=new Date(2016,08,5,20,45);   

  //<---- date variable gets proper date(type)
  //<---- also note month starts with zero(0) so for sep month (08) is taken.
}

answered Sep 15 '16 at 19:09

micronyks

54,797
15
112
146

The issue with your answer is that at the controller level I don't have the `date` variable as it's generated with an ngFor on the view level. Furthermore, the date object is received from the DB in the following format: `2016-09-15T19:45:00.000Z` – Hamza L. Sep 15 '16 at 19:22
Thats fine. I just gave you some hint. Whatever you have, you just need to make sure that you deal with date type at the end. Then n then it will work the way you want. – micronyks Sep 15 '16 at 19:25
I can't make it work, especially because the received format from the DB is `2016-09-15T19:45:00.000Z` – Hamza L. Sep 15 '16 at 19:30
You can easily conver it in to date format. Just google it little bit and you will be able to resolve your issue. – micronyks Sep 15 '16 at 19:31
Not sure but i think its(which one you just showed) call ed `timestamp format`. Now search how to convert it in to proper desire date. – micronyks Sep 15 '16 at 19:33
@HamzaL. I'd say this is what you are looking for: http://stackoverflow.com/questions/36681078/angular-2-date-deserialization – Stefan Svrkota Sep 15 '16 at 19:44

Angular2 - Issue with Date pipe

1 Answers1