Angular

Pipes in Angular Part – 2 : DatePipe

This is the second part of angular pipe series, in this part we will discuss about DatePipe. Date pipe is used to format the date value according to a locale rules. Before digging more information you can read first part of pipe series here which includes details of lowercase, uppercase, and titlecase pipes.

DatePipe

Developers wants proof of code

As a developer we always believe in code. So, lets take an example to understand the date pipe. Consider the below code where you want to try display current date.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  today: number = Date.now();
}

app.component.html

<div style="text-align:center">
  <p>Today is : {{today}}
</div>

Output

DatePipe1

This is not in readable format. So Angular provides a pipe using which we can change it to readable format.

Syntax

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}
Now let’s consider below code in which we will convert date to readable format
<div style="text-align:center">
  <p>Today is : {{today | date}}
</div>

Output

DatePipe2

The date is readable, but our client always asks us to format it. So Angular do have the answer for that too. Angular provides some predefined date formats, and also allow us to write our custom format.

Consider below code in which we are applying Angular’s default ‘short’ format

<div style="text-align:center">
  <p>Today is : {{today | date : 'short'}}
</div>

//Output: Today is : 7/1/18, 6:46 PM

Below is the full list of formatting options Angular provides

FormatCodeOutput FormatOutput
short{{today | date : ‘short’}}M/d/yy, h:mm a7/1/18, 6:58 PM
medium{{today | date : ‘medium’}}MMM d, y, h:mm:ss aJul 1, 2018, 6:58:54 PM
long{{today | date : ‘long’}}MMMM d, y, h:mm:ss a zJuly 1, 2018 at 7:06:35 PM GMT+5
full{{today | date : ‘full’}}EEEE, MMMM d, y, h:mm:ss a zzzzSunday, July 1, 2018 at 7:07:54 PM GMT+05:30
shortDate{{today | date : ‘shortDate’}}M/d/yy7/1/18
mediumDate{{today | date : ‘mediumDate’}}MMM d, yJul 1, 2018
longDate{{today | date : ‘longDate’}}MMMM d, yJuly 1, 2018
fullDate{{today | date : ‘fullDate’}}EEEE, MMMM d, ySunday, July 1, 2018
shortTime{{today | date : ‘shortTime’}}h:mm a7:16 AM
mediumTime{{today | date : ‘mediumTime’}}h:mm:ss a7:16:28 PM
longTime{{today | date : ‘longTime’}}h:mm:ss a z7:16:28 PM GMT+5
fullTime{{today | date : ‘fullTime’}}h:mm:ss a zzzz7:16:28 PM GMT+05:30

Custom formatting options

You can construct a format string using symbols to specify the components of a date-time value, as described in the following table.

Field typeFormatDescriptionExample Value
EraG, GG, GGGAbbreviatedAD
GGGGWideAnno Domini
GGGGGNarrowA
YearyNumeric: minimum digits2, 20, 201, 2017, 20173
yyNumeric: 2 digits + zero padded02, 20, 01, 17, 73
yyyNumeric: 3 digits + zero padded002, 020, 201, 2017, 20173
yyyyNumeric: 4 digits or more + zero padded0002, 0020, 0201, 2017, 20173
MonthMNumeric: 1 digit9, 12
MMNumeric: 2 digits + zero padded09, 12
MMMAbbreviatedSep
MMMMWideSeptember
MMMMMNarrowS
Month standaloneLNumeric: 1 digit9, 12
LLNumeric: 2 digits + zero padded09, 12
LLLAbbreviatedSep
LLLLWideSeptember
LLLLLNarrowS
Week of yearwNumeric: minimum digits1… 53
wwNumeric: 2 digits + zero padded01… 53
Week of monthWNumeric: 1 digit1… 5
Day of monthdNumeric: minimum digits1
ddNumeric: 2 digits + zero padded01
Week dayE, EE, & EEEAbbreviatedTue
EEEEWideTuesday
EEEEENarrowT
EEEEEEShortTu
Perioda, aa, & aaaAbbreviatedam/pm or AM/PM
aaaaWide (fallback to a when missing)ante meridiem/post meridiem
aaaaaNarrowa/p
Period*B, BB, & BBBAbbreviatedmid.
BBBBWideam, pm, midnight, noon, morning, afternoon, evening, night
BBBBBNarrowmd
Period standalone*b, bb, & bbbAbbreviatedmid.
bbbbWideam, pm, midnight, noon, morning, afternoon, evening, night
bbbbbNarrowmd
Hour 1-12hNumeric: minimum digits1, 12
hhNumeric: 2 digits + zero padded01, 12
Hour 0-23HNumeric: minimum digits0, 23
HHNumeric: 2 digits + zero padded00, 23
MinutemNumeric: minimum digits8, 59
mmNumeric: 2 digits + zero padded08, 59
SecondsNumeric: minimum digits0… 59
ssNumeric: 2 digits + zero padded00… 59
Fractional secondsSNumeric: 1 digit0… 9
SSNumeric: 2 digits + zero padded00… 99
SSSNumeric: 3 digits + zero padded (= milliseconds)000… 999
Zonez, zz, & zzzShort specific non location format (fallback to O)GMT-8
zzzzLong specific non location format (fallback to OOOO)GMT-08:00
Z, ZZ, & ZZZISO8601 basic format-0800
ZZZZLong localized GMT formatGMT-8:00
ZZZZZISO8601 extended format + Z indicator for offset 0 (= XXXXX)-08:00
O, OO, & OOOShort localized GMT formatGMT-8
OOOOLong localized GMT formatGMT-08:00

Let us consider an example with some of the defalut and custom formatting options. For this example we will use same component from previous example.

app.component.html

<div style="text-align:left">
  <p>In fullTime format : {{today | date : 'fullTime'}}
  <p>In mediumDate format : {{today | date : 'mediumDate'}}
  <p>In long format : {{today | date : 'long'}}
  <p>In shortDate format : {{today | date : 'shortDate'}}
  <p>In shortTime format : {{today | date : 'shortTime'}}
  <p>In custom fullTime format : {{today | date : 'h:mm:ss a zzzz'}}
  <p>In custom mediumDate format : {{today | date : 'MMM d, y'}}
  <p>In custom long format : {{today | date : 'MMMM d, y, h:mm:ss a z'}}
  <p>In custom shortDate format : {{today | date : 'M/d/yy'}}
  <p>In custom shortTime format : {{today | date : 'h:mm a'}}
</div>

Output

DatePipeFinalOutput

Summary

Only the en-US locale data comes with Angular. To localize dates in another language, you must import the corresponding locale data. In next part we will get information on CurrencyPipe, PercentPipe

Leave a Reply