Date pipe with angular not working as advertised

Zachscs

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

Tallerlei

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" .

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related