CODEWITHSUNDEEP
angular
Zachscs
Zachscs

Reputation: 3663

Date pipe with angular not working as advertised

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

Upvotes: 5

Views: 16824

Answers (3)

EMATade
EMATade

Reputation: 133

You can use just this one

date:'medium'

Upvotes: -1

Tallerlei
Tallerlei

Reputation: 219

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

Upvotes: 2

DeborahK
DeborahK

Reputation: 60518

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:

enter image description here

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

Upvotes: 1

Related Questions