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

[blockquote]Developers wants proof of code[/blockquote]

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

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

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

[table style=”3″] [tr][th]Format[/th] [th]Code[/th] [th]Output Format[/th] [th]Output[/th][/tr] [tr][td]short[/td] [td]{{today | date : ‘short’}}[/td] [td]M/d/yy, h:mm a[/td] [td]7/1/18, 6:58 PM[/td][/tr] [tr][td]medium[/td] [td]{{today | date : ‘medium’}}[/td] [td]MMM d, y, h:mm:ss a[/td] [td]Jul 1, 2018, 6:58:54 PM [/td][/tr] [tr][td]long[/td] [td]{{today | date : ‘long’}}[/td] [td]MMMM d, y, h:mm:ss a z[/td] [td]July 1, 2018 at 7:06:35 PM GMT+5 [/td][/tr] [tr][td]full[/td] [td]{{today | date : ‘full’}}[/td] [td]EEEE, MMMM d, y, h:mm:ss a zzzz[/td] [td]Sunday, July 1, 2018 at 7:07:54 PM GMT+05:30 [/td][/tr] [tr][td]shortDate[/td] [td]{{today | date : ‘shortDate’}}[/td] [td]M/d/yy[/td] [td]7/1/18[/td][/tr] [tr][td]mediumDate[/td] [td]{{today | date : ‘mediumDate’}}[/td] [td]MMM d, y[/td] [td]Jul 1, 2018 [/td][/tr] [tr][td]longDate[/td] [td]{{today | date : ‘longDate’}}[/td] [td]MMMM d, y[/td] [td]July 1, 2018 [/td][/tr] [tr][td]fullDate[/td] [td]{{today | date : ‘fullDate’}}[/td] [td]EEEE, MMMM d, y[/td] [td]Sunday, July 1, 2018 [/td][/tr] [tr][td]shortTime[/td] [td]{{today | date : ‘shortTime’}}[/td] [td]h:mm a[/td] [td]7:16 AM[/td][/tr] [tr][td]mediumTime[/td] [td]{{today | date : ‘mediumTime’}}[/td] [td]h:mm:ss a[/td] [td]7:16:28 PM[/td][/tr] [tr][td]longTime[/td] [td]{{today | date : ‘longTime’}}[/td] [td]h:mm:ss a z[/td] [td]7:16:28 PM GMT+5[/td][/tr] [tr][td]fullTime[/td] [td]{{today | date : ‘fullTime’}}[/td] [td]h:mm:ss a zzzz[/td] [td]7:16:28 PM GMT+05:30 [/td][/tr] [/table]

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.

[table style=”3″] [tr][th]Field type[/th][th]Format[/th][th]Description[/th][th]Example Value[/th][/tr] [tr][td]Era[/td][td]G, GG, GGG[/td][td]Abbreviated[/td][td]AD[/td][/tr] [tr][td][/td][td]GGGG[/td][td]Wide[/td][td]Anno Domini[/td][/tr] [tr][td][/td][td]GGGGG[/td][td]Narrow[/td][td]A[/td][/tr] [tr][td]Year[/td][td]y[/td][td]Numeric: minimum digits[/td][td]2, 20, 201, 2017, 20173[/td][/tr] [tr][td][/td][td]yy[/td][td]Numeric: 2 digits + zero padded[/td][td]02, 20, 01, 17, 73[/td][/tr] [tr][td][/td][td]yyy[/td][td]Numeric: 3 digits + zero padded[/td][td]002, 020, 201, 2017, 20173[/td][/tr] [tr][td][/td][td]yyyy[/td][td]Numeric: 4 digits or more + zero padded[/td][td]0002, 0020, 0201, 2017, 20173[/td][/tr] [tr][td]Month[/td][td]M[/td][td]Numeric: 1 digit[/td][td]9, 12[/td][/tr] [tr][td][/td][td]MM[/td][td]Numeric: 2 digits + zero padded[/td][td]09, 12[/td][/tr] [tr][td][/td][td]MMM[/td][td]Abbreviated[/td][td]Sep[/td][/tr] [tr][td][/td][td]MMMM[/td][td]Wide[/td][td]September[/td][/tr] [tr][td][/td][td]MMMMM[/td][td]Narrow[/td][td]S[/td][/tr] [tr][td]Month standalone[/td][td]L[/td][td]Numeric: 1 digit[/td][td]9, 12[/td][/tr] [tr][td][/td][td]LL[/td][td]Numeric: 2 digits + zero padded[/td][td]09, 12[/td][/tr] [tr][td][/td][td]LLL[/td][td]Abbreviated[/td][td]Sep[/td][/tr] [tr][td][/td][td]LLLL[/td][td]Wide[/td][td]September[/td][/tr] [tr][td][/td][td]LLLLL[/td][td]Narrow[/td][td]S[/td][/tr] [tr][td]Week of year[/td][td]w[/td][td]Numeric: minimum digits[/td][td]1… 53[/td][/tr] [tr][td][/td][td]ww[/td][td]Numeric: 2 digits + zero padded[/td][td]01… 53[/td][/tr] [tr][td]Week of month[/td][td]W[/td][td]Numeric: 1 digit[/td][td]1… 5[/td][/tr] [tr][td]Day of month[/td][td]d[/td][td]Numeric: minimum digits[/td][td]1[/td][/tr] [tr][td][/td][td]dd[/td][td]Numeric: 2 digits + zero padded[/td][td]01[/td][/tr] [tr][td]Week day[/td][td]E, EE, & EEE[/td][td]Abbreviated[/td][td]Tue[/td][/tr] [tr][td][/td][td]EEEE[/td][td]Wide[/td][td]Tuesday[/td][/tr] [tr][td][/td][td]EEEEE[/td][td]Narrow[/td][td]T[/td][/tr] [tr][td][/td][td]EEEEEE[/td][td]Short[/td][td]Tu[/td][/tr] [tr][td]Period[/td][td]a, aa, & aaa[/td][td]Abbreviated[/td][td]am/pm or AM/PM[/td][/tr] [tr][td][/td][td]aaaa[/td][td]Wide (fallback to a when missing)[/td][td]ante meridiem/post meridiem[/td][/tr] [tr][td][/td][td]aaaaa[/td][td]Narrow[/td][td]a/p[/td][/tr] [tr][td]Period*[/td][td]B, BB, & BBB[/td][td]Abbreviated[/td][td]mid.[/td][/tr] [tr][td][/td][td]BBBB[/td][td]Wide[/td][td]am, pm, midnight, noon, morning, afternoon, evening, night[/td][/tr] [tr][td][/td][td]BBBBB[/td][td]Narrow[/td][td]md[/td][/tr] [tr][td]Period standalone*[/td][td]b, bb, & bbb[/td][td]Abbreviated[/td][td]mid.[/td][/tr] [tr][td][/td][td]bbbb[/td][td]Wide[/td][td]am, pm, midnight, noon, morning, afternoon, evening, night[/td][/tr] [tr][td][/td][td]bbbbb[/td][td]Narrow[/td][td]md[/td][/tr] [tr][td]Hour 1-12[/td][td]h[/td][td]Numeric: minimum digits[/td][td]1, 12[/td][/tr] [tr][td][/td][td]hh[/td][td]Numeric: 2 digits + zero padded[/td][td]01, 12[/td][/tr] [tr][td]Hour 0-23[/td][td]H[/td][td]Numeric: minimum digits[/td][td]0, 23[/td][/tr] [tr][td][/td][td]HH[/td][td]Numeric: 2 digits + zero padded[/td][td]00, 23[/td][/tr] [tr][td]Minute[/td][td]m[/td][td]Numeric: minimum digits[/td][td]8, 59[/td][/tr] [tr][td][/td][td]mm[/td][td]Numeric: 2 digits + zero padded[/td][td]08, 59[/td][/tr] [tr][td]Second[/td][td]s[/td][td]Numeric: minimum digits[/td][td]0… 59[/td][/tr] [tr][td][/td][td]ss[/td][td]Numeric: 2 digits + zero padded[/td][td]00… 59[/td][/tr] [tr][td]Fractional seconds[/td][td]S[/td][td]Numeric: 1 digit[/td][td]0… 9[/td][/tr] [tr][td][/td][td]SS[/td][td]Numeric: 2 digits + zero padded[/td][td]00… 99[/td][/tr] [tr][td][/td][td]SSS[/td][td]Numeric: 3 digits + zero padded (= milliseconds)[/td][td]000… 999[/td][/tr] [tr][td]Zone[/td][td]z, zz, & zzz[/td][td]Short specific non location format (fallback to O)[/td][td]GMT-8[/td][/tr] [tr][td][/td][td]zzzz[/td][td]Long specific non location format (fallback to OOOO)[/td][td]GMT-08:00[/td][/tr] [tr][td][/td][td]Z, ZZ, & ZZZ[/td][td]ISO8601 basic format[/td][td]-0800[/td][/tr] [tr][td][/td][td]ZZZZ[/td][td]Long localized GMT format[/td][td]GMT-8:00[/td][/tr] [tr][td][/td][td]ZZZZZ[/td][td]ISO8601 extended format + Z indicator for offset 0 (= XXXXX)[/td][td]-08:00[/td][/tr] [tr][td][/td][td]O, OO, & OOO[/td][td]Short localized GMT format[/td][td]GMT-8[/td][/tr] [tr][td][/td][td]OOOO[/td][td]Long localized GMT format[/td][td]GMT-08:00[/td][/tr] [/table]

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

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

Yatendrasinh Joddha

I have healthy knowledge and experience in Azure, O365 and ASP.Net with c#, MVC, WebApi along with client-side frameworks and libraries like JavaScript, JQuery, KnockoutJs, AngularJs, Angular, ReactJs, NodeJs