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.

Angular date pipe example

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 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 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 date object and 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 all, the date format is used frequently, and others are optional and used when we really need it.

ArgumentDescription
formatFor the desired output format of date, we can use either predefined date format or custom date format using symbols.
timezoneOptional. Default is undefined. A timezone offset (such as ‘+0430’), or a standard UTC/GMT or continental US timezone abbreviation.
localeOptional. Default is undefined. A locale code for the locale format rules to use.

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.

Angular date pipe 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 represent of 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

OptionEquivalent toResult
'short''M/d/yy, h:mm a'11/5/21, 11:41 AM
'medium''MMM d, y, h:mm:ss a'Nov 5, 2021, 11:41:16 AM
'long''MMMM d, y, h:mm:ss a z'June 15, 2015 at 9:03:01 AM GMT+1
'full''EEEE, MMMM d, y, h:mm:ss a zzzz'November 5, 2021 at 11:41:16 AM GMT+5
'shortDate''M/d/yy'11/5/21
'mediumDate''MMM d, y'Nov 5, 2021
'longDate''MMMM d, y'November 5, 2021
'fullDate''EEEE, MMMM d, y'Friday, November 5, 2021
'shortTime''h:mm a'11:46 AM
'mediumTime''h:mm:ss a'11:46:39 AM
'longTime''h:mm:ss a z'11:47:07 AM GMT+5
'fullTime''h:mm:ss a zzzz'11:47:48 AM GMT+05:30

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 pipe 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

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top