Angular Basics: Date Pipe Formats 101 with Examples

Learn how to use the date pipe to format date displays in your Angular app, and tour the custom date formats and shortcuts available.

We often have to format dates in our Angular apps, and the date pipe provides an easy way to do this. Pipes are functions that take an input and return output formatted our preferred way in the component template.

In this article, we will look at how to use the built-in Angular date pipe to format dates in our Angular apps.

Basic Usage

To use the date pipe, we just use the pipe sign (|) and date after our template expression.

For instance, we write:

app.comnponent.ts

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  currentDate = new Date();
}

to define the currentDate variable and set it to the current date.

Then we write

app.component.html

{{ currentDate | date }}

to show the value of currentDate and format it with the date pipe.

As a result, we should get something like Mar 11, 2023 on the screen.

Without the date pipe, we see the date string value returned by the native Date instance, which is something like Sat Mar 11 2023 09:19:13 GMT-0800 (Pacific Standard Time).

The default date format for dates returned by the date pipe can be changed.

To change it, we set the DATE_PIPE_DEFAULT_OPTIONS injection token’s value.

For instance, we write:

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { DATE_PIPE_DEFAULT_OPTIONS } from "@angular/common";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    {
      provide: DATE_PIPE_DEFAULT_OPTIONS,
      useValue: { dateFormat: "longDate" }
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

to add the DATE_PIPE_DEFAULT_OPTIONS injection token into our Angular app’s module by adding an object in the providers array with the provide property set to DATE_PIPE_DEFAULT_OPTIONS.

And we set the value of this token by setting the useValue property.

We set the dateFormat to 'longDate' to display dates in long format by default.

As a result, when we have:

app.component.html

{{ currentDate | date }}

Now, we get something like March 11, 2023 displayed by default.

The date pipe only returns the formatted date and doesn’t mutate the original date.

Custom Date Formats

The date pipe comes with many options to format dates. We can use various characters and put them in a string to format date values.

The list of format characters we can use includes:

Era

• G, GG and GGG - abbreviated era. Example value: AD.
• GGGG - full era. Example value: Anno Domini.
• GGGGG - narrow era. Example value: A.

Year

• y - minimum digits. Example value: 20.
• yy - 2 digits + zero padded. Example value: 20.
• yyy - 3 digits + zero padded. Example value: 023.
• yyyy - 4 digits or more + zero padded. Example value: 2023.

The upper case versions of these format strings are for formatting the week-numbering year.

Month

• M - 1 digit month. Example value: 9.
• MM - 2 digits + zero padded. Example value: 09.
• MMM - abbreviation. Example value: Sep.
• MMMM - full month name. Example value: September.
• MMMMM - narrow month name. Example value: S.

To format a standalone month, we replace all Ms with Ls.

Week of Year

• w - minimum digits. Example values: 1… 53.
• ww- 2 digits + zero padded. Example values: 01… 53.

Week of Month

• W - 1 digit. Example value: 1… 5.

Day of Month

• d - minimum digits. Example value: 1.
• dd - 2 digits + zero padded. Example value: 01.

Weekday

• E, EE and EEE - abbreviation. Example value: Tue.
• EEEE - full name. Example value: Tuesday.
• EEEEE - narrow name. Example value: T.
• EEEEEE - short name. Example value: Tu.

We replace Es with cs to format standalone weekdays.

Period

• a, aa and aaa - abbreviated name. Example values: am/pm or AM/PM.
• aaaa - full name. Example values: ante meridiem/post meridiem.
• aaaaa - narrow name. Example values: a/p.

Locale Specific Period Names

• B, BB and BBB - abbreviated names. Example value: mid.
• BBBB - full name. Example values: am, pm, midnight, noon, morning, afternoon, evening, night.
• BBBBB - narrow name. Example value: md.

We can replace Bs with bs to format standalone locale specific period names.

Hour 1-12

• h - minimum digits. Example values: 1, 12.
• hh - 2 digits + zero padded. Example values: 01, 12.

Hour 0-23

• H - minimum digits. Example values: 1, 23.
• HH - 2 digits + zero padded. Example values: 01, 23.

Minute

• m - minimum digits. Example values: 1, 59.
• mm - 2 digits + zero padded. Example values: 01, 59.

Second

• s minimum digits. Example values: 0… 59.
• ss - 2 digits + zero padded. Example values: 00… 59.

Fractional Seconds

• S - 1 digit. Example values: 0… 9.
• SS - 2 digits + zero padded. Example values: 00… 99.
• SSS - milliseconds. Example values: 000… 999.

Time Zone

• z, zz and zzz - Short specific non-location format (fallback to O). Example value: GMT-6
• zzzz - long specific non-location format (fallback to OOOO). Example value: GMT-06:00.
• Z, ZZ and ZZZ - ISO8601 basic format. Example value: -0600.
• ZZZZ - long localized GMT format. Example value: GMT-6:00.
• ZZZZZ - ISO8601 extended format + Z indicator for offset 0. Example value: -06:00.
• O, OO and OOO - short localized GMT format. Example value: GMT-6.
• OOOO - long localized GMT format. Example value: GMT-06:00.

We can combine these strings into one format string to return dates in the format we want.

For instance, we write:

app.component.html

{{ currentDate | date : "EEEE YYYY-MM-dd hh:mm:ss.SSS OOOO" }}

to render currentDate with the full weekday, 4-digit year, 2-digit month, 2-digit date, 2-digit hour, 2-digit minute, 2-digit sections, milliseconds, and long localized time zone name.

As a result, we get something like Saturday 2023-03-11 09:51:55.791 GMT-08:00 displayed on the screen.

Angular also comes with handy shorthands for some combinations of the format strings above.

The list of these include:

• 'short' - equivalent to 'M/d/yy, h:mm a'. Example value: 6/15/23, 9:03 AM.
• 'medium' - equivalent to 'MMM d, y, h:mm:ss a'. Example value: Jun 15, 2023, 9:03:01 AM.
• 'long' - equivalent to 'MMMM d, y, h:mm:ss a z'. Example value: June 15, 2023 at 9:03:01 AM GMT+1.
• 'full' - equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz'. Example value: Monday, June 15, 2015 at 9:03:01 AM GMT+01:00.
• 'shortDate' - equivalent to, example value: 'M/d/yy'. Example value: 6/15/23.
• 'mediumDate' - equivalent to 'MMM d, y'. Example value: Jun 15, 2023.
• 'longDate' - equivalent to'MMMM d, y'. Example value: June 15, 2023.
• 'fullDate' - equivalent to 'EEEE, MMMM d, y'. Example value: Saturday, March 11, 2023.
• 'shortTime' - equivalent to 'h:mm a'. Example value: 9:03 AM.
• 'mediumTime' - equivalent to 'h:mm:ss a'. Example value: 9:03:01 AM.
• 'longTime' equivalent to 'h:mm:ss a z'. Example value: 9:03:01 AM GMT+1.
• 'fullTime' - equivalent to 'h:mm:ss a zzzz'. Example value 9:03:01 AM GMT+01:00.

For instance, we write:

app.component.html

{{ currentDate | date : "fullDate" }}

And we get something like Saturday, March 11, 2023 displayed on the screen.

Conclusion

Angular makes it easy for us to format date displays in our apps to the format we are looking for—we just use the date pipe.

We can also change the default format of dates returned by the date pipe by changing an injection token. And we can use preset date format strings to format dates in addition to creating our own format string.

The date pipe only returns a date string formatted the way we specify and does not change the original date.