Angular Date pipe and how to formate dates in Angular

Angular date pipe is an Angular built-in pipe and it is used to format date value to a string of the desired format in the component template. The date can be a Date object or a number of milliseconds and we can specify the date of different formats like ‘dd/MM/yyyy’, ‘MM-yy’, or one of the predefined date format symbolic names available like ‘short’, ‘long’ etc.

In this tutorial we’ll learn how to used Angular date pipe and how we we can formate date in different format in component template.

Angular date pipe basic

To better understand how Angular date pipe works, we demonstrate an example with and without date pipe.

Where now is the current date and time, we can see that without the date pipe we are displaying all information about the date and time. Let’s define now in our typescript and add a date pipe example in the component template.

....
export class AppComponent {
  now = new Date();
}

  <section>
    <p><b>Date without pipe: {{ now }}</b>{{ now }}</p>
    <p><b>Date with default pipe value: </b> {{ now | date }}</p>
    <p><b>Date with custom pipe value : </b> {{ now | date: 'MMM-dd-yyyy' }}</p>
  </section>

Angular date pipe syntax

The Date input can be given as a date object, milliseconds, or an ISO date string and we can convert this to our desired date formate by using an angular date pipe. Angular date Pipe provides different date formats that can be predefined date formats as well as custom date formats. Syntax of date pipe as. Syntax of date pipe as.

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

Where value_expression is the date object and the colon after the date is where we pass string parameters to a date object. If we have multiple parameters then we can simply separate them with additional colons. Note all build-in pipes will not take multiple parameters, only some take.

It also takes an option; a colon ( : ) denotes that the following value is passed to the pipe as a configuration option. In this example, you’re passing a configuration option that formats the date according to the format of ‘shortDate’, which I’ll cover shortly.

Angular date pipe arguments

The Date pipe accepts three arguments format, timezone & locale. We don’t need to use them all, the date format is used frequently, and others are optional and used when we really need them.

Angular date pipe example

In the example below we have used date input as a millisecond and data object. We will convert the angular date into a different date format as in the screenshot of our example.

We have implemented the above example in our code in the app.component.ts file.

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

@Component({
  selector: 'app-root',
  template: `
  <section>
    <p>
      <b>Birthday in format dd/MM/yyyy :</b>
      {{ birthday | date:'dd/MM/yyyy' }}
    </p>
    <p>
      <b>Current time in Format dd/MMM/yyyy hh:mm:ss : </b>
      {{ nowDateObject | date: 'dd/MMM/yyyy hh:mm:ss' }}
    </p>
    <p>
      <b>Current time in short format: </b>
      {{ nowDateObject | date:'short' }}
    </p>
    <p>
      <b>Current time in timeMedium format :</b> 
      {{ nowDateObject | date: 'medium' }}
    </p>
    <p>
      <b>Current time in timeLong format : </b>
      {{ nowDateObject | date: 'long' }}
    </p>
    <p>
      <b>Current time in timeFull format : </b>
      {{ nowDateObject | date: 'full' }}
    </p>
    <p>
      <b>Current time in timelongDate format : </b>
      {{ nowDateObject | date: 'longDate' }}
    </p>
    <p>
      <b>Current time in timefullDate format: </b> 
      {{ nowDateObject | date: 'fullDate' }}
    </p>
</section>
  `,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  nowDateObject = Date.now(); // Date object
  birthday = 972496541151; // Millisecond

  constructor() { }

}

Angular date pipe custom format option and predefine format option.

Angular date pipe provides format string to custom date formats as we have seen in our example. We have listed all format strings with their meaning.

• d: numeric represents of the day as 1
• dd: Numeric: 2 digits + zero-padded as 01
• M: Numeric: 1 digit
• MM: Numeric: 2 digit
• MMM: Abbreviated month: Jul
• yyyy: Four-digit year as 2020
• h: represents hour(12)
• H: represents hour(24)
• m: represents minute.
• s: represents seconds.
• z: represents timezone.

Pre-defined format options

Angular Date pipe predefine format option.

Angular date pipe provides a predefined format option to custom date formats. We have some predefined format options in string names with their meaning.

1. short
2. shortDate
3. medium
4. mediumDate
5. long
6. longDate
7. full
8. fullDate
9. fullTime
10. shortTime
11. mediumTime
12. longTime

An example of format time using Angular date pipe as.

<p>{{ today | date:'HH:mm' }}</p>
<!-- Will display '12:05' -->

<p>{{ today | date:'shortTime' }}</p>
<!-- Will display 9:03 AM -->

<p>{{ today | date:'mediumTime' }}</p>
<!-- Will display 9:03:01 AM -->

Chaining multiple pipe in angular

Angular allows us to the chaining of pipe in some pipes and not in all. If the pipe accepts multiple parameters, separate the values with colons. We can combine pipes in an Angular Date. An example we want to have different date formats plus date text in uppercase. We can add a pipe symbol after a pipe, so we could add uppercase here and order might be important. Generally, it will be passed from left to right.

{{ birthday | date : 'fullDate' | uppercase  }}

Check more information on the date pipe custom format option and predefine format option on official documentation.

Related Articles

• Angular Pipes and built-in pipes in angular
• Detail example of the custom directive in an angular?
• Angular adds and removes classes using ngClass.
• Angular ngIf directive in details
• Angular the ngSwitch directive in details