Date pipe with angular not working as advertised

Question

The date pipe in angular is supposed to work like it says in the docs: https://angular.io/api/common/DatePipe. However when I run Today's date is {{myDate| date:'fullDate'}} it is printing Today's date is 1/30/2018. And that's it, no time, no time zone. Anyone experienced this and found a way to get it to work the way it is supposed to?

Edit: no matter what I set date to it prints the same date.

The date is being set as so

getDate(date: string) {
    //date = '2018-01-30T00:02:14.637Z';
    return new Date(date);
}

I've tried it this way and using that string directly in the template and the result is the same M/D/YYYY

@DeborahK It's a Date object. It's from new Date() with an iso date string passed in. — Zachscs, Jan 31 '18 at 01:17
@matmo nope not reproducable on stackblitz. When was date pipe added I'm using angular 2.4 — Zachscs, Jan 31 '18 at 01:26
@DeborahK yeah oops, no matter what I put it, full or fullDate or any of the example parameters from that doc, it doesn't work. — Zachscs, Jan 31 '18 at 01:26
Does it behave differently if you don't initialize your new Date with an iso string? Just throwing out ideas — matmo, Jan 31 '18 at 01:28
I'm getting the dates from the DB as iso strings that's the issue. — Zachscs, Jan 31 '18 at 01:36

DeborahK · Answer 1 · 2018-01-31T01:29:08.437

1

I just tried this and full provides the full date. fulldate only provides the date, not the date with the time and time zone.

My HTML

  <div class='panel-heading'>
    {{pageTitle}} today: {{ today | date: 'full'}}
  </div>

In my component

today: Date = new Date(Date.now());

The result is this:

Notice that the date appears in its full format. (Ignore where I put it ... I'm just using one of my sample apps.)

edited Jan 31 '18 at 01:29

answered Jan 31 '18 at 01:26

DeborahK

57,520
12
104
129

Right basically none of the pipes are working. So even with full it prints as M/D/YYYY which is still not what full is supposed to do. – Zachscs Jan 31 '18 at 01:27
If you are not seeing this ... I would guess that something is wrong with how you are setting the date in the component. Could you paste that code as well? – DeborahK Jan 31 '18 at 01:29
Date pipe has been there since the beginning ... but I seem to recall that it did not originally support all incoming date formats. Try passing the value as a string instead of a date object and see if that helps. – DeborahK Jan 31 '18 at 01:35
Same result with string and date object. – Zachscs Jan 31 '18 at 01:35
There is a discussion about this here: https://github.com/angular/angular/issues/3261 and here: https://github.com/angular/angular/pull/7794 But these were both fixed in an rc before v2. – DeborahK Jan 31 '18 at 01:42
What browser are you using? And did I see above that you were *not* able to reproduce it in stackblitz? – DeborahK Jan 31 '18 at 01:42
can someone help me here? https://stackoverflow.com/questions/65414341/angular-date-pipe-not-working-how-to-fix – earlwaltonluv3462 Dec 22 '20 at 18:57

Tallerlei · Accepted Answer · 2019-04-10T06:14:54.627

TL;DR - use date:'full' if you are on Angular v5 or bigger - build your own date string if you are on a lower version

The documentation on https://angular.io/api/common/DatePipe is based on the current release I guess. I'm currently on @angular/common 4.2.4 and had a look at the date_pipe.d.ts.

'long', 'full', 'longTime' and 'fullTime' formats are missing.

So if you don't want to update to Angular 5, you can still 'rebuild them' by combining the selectors:

*  | Component | Symbol | Narrow | Short Form   | Long Form         | Numeric   | 2-digit   |
*  |-----------|:------:|--------|--------------|-------------------|-----------|-----------|
*  | era       |   G    | G (A)  | GGG (AD)     | GGGG (Anno Domini)| -         | -         |
*  | year      |   y    | -      | -            | -                 | y (2015)  | yy (15)   |
*  | month     |   M    | L (S)  | MMM (Sep)    | MMMM (September)  | M (9)     | MM (09)   |
*  | day       |   d    | -      | -            | -                 | d (3)     | dd (03)   |
*  | weekday   |   E    | E (S)  | EEE (Sun)    | EEEE (Sunday)     | -         | -         |
*  | hour      |   j    | -      | -            | -                 | j (1 PM)  | jj (1 PM) |
*  | hour12    |   h    | -      | -            | -                 | h (1)     | hh (01)   |
*  | hour24    |   H    | -      | -            | -                 | H (13)    | HH (13)   |
*  | minute    |   m    | -      | -            | -                 | m (5)     | mm (05)   |
*  | second    |   s    | -      | -            | -                 | s (9)     | ss (09)   |
*  | timezone  |   z    | -      | -            | z (Pacific Standard Time)| -  | -         |
*  | timezone  |   Z    | -      | Z (GMT-8:00) | -                 | -         | -         |
*  | timezone  |   a    | -      | a (PM)       | -                 | -         | -         |

In my case I used

{{ dateString | date:''EEEE, MMMM dd, y, hh:mm:ss Z'}}

with output: "Monday, April 09, 2018, 03:42:00 GMT+2" .

Nice TL;DR, but you should put it @ the beginning otherwise it becomes a TL;alreadyRead ;-) — Pipo, Apr 08 '19 at 23:24
I moved it to the top, thanks for reading all that to find the tl;dr ;) — Tallerlei, Apr 11 '19 at 09:38

score -1 · Answer 3 · edited Jan 04 '20 at 08:31

-1

You can use just this one

date:'medium'

edited Jan 04 '20 at 08:31

Ṃųỻịgǻňạcểơửṩ

2,517
8
22
33

answered Jan 04 '20 at 07:51

EMATade

105
2
13

Date pipe with angular not working as advertised

3 Answers3