Angular 16 Date Pipe Tutorial with Date Format Examples

In this Angular 16 DatePipe tutorial, we are going to learn how to use Date Pipe operator to format the date as per the locale rule.In Angular, a pipe is a feature that allows you to transform data before displaying it in the template. Pipes are used to format and manipulate data in a convenient way, providing a simple syntax for common data transformations.

Angular DatePipe offers various predefined date formats; furthermore, we can also customize the date formats using DatePipe.

What is Pipe Operator?

A pipe is an innovative feature in Angular, Pipe helps in transforming the values into the desired result. Angular offers numerous prebuilt pipes, although you can create a custom Pipe in Angular as per your requirement.

Angular Date Pipe Example

The date input can be represented as a date object, and DatePipe belongs to the CommonModule. It’s a Pipe based API, and It works with the help of pipe operator, which can be described {{dateToday | date}}.

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

@Component({
  selector: "my-app",
  template: `
    <div>
      <p>Today is {{ dateToday | date }}</p>
    </div>
  `
})

// Show current date
export class AppComponent {
  dateToday: number = Date.now();
}

As per the following example, we set the dateToday value with JavaScript’s Date.now() method. In the Angular template, we declared the dateToday variable on the left-hand side inside the interpolation expression.

To get the current date, we are using the DatePipe operator on the right-hand side. This Date Pipe operator will display the current date.

Custom Date Formats in Angular

Next, we will understand how to use custom date formats using DatePipe operator in Angular. Let us have a look on the below date symbols which can be used to construct custom date formats.

1. d denotes Day
2. M denotes Month
3. y denotes Year
4. s denotes Seconds (0-59)
5. m denotes Minute
6. h denotes Hour (1-12)
7. H denotes Hour (0-23)
8. E denotes Week Day
9. z denotes timezone

Angular 8 Custom Date Formats Examples

To better understand the Angular custom date formats we assume that have following date Thu Oct 30 2019 06:50:22 GMT+0530 which is wrapped with customDate variable inside the Angular template.

Add the following code inside the app.component.ts file:

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

@Component({
  selector: "my-app",
  template: `
    <div>
      <p>{{ customDate | date: "d" }}</p>

      <p>{{ customDate | date: "M" }}</p>

      <p>{{ customDate | date: "y" }}</p>

      <p>{{ customDate | date: "s" }}</p>

      <p>{{ customDate | date: "m" }}</p>

      <p>{{ customDate | date: "h" }}</p>

      <p>{{ customDate | date: "H" }}</p>

      <p>{{ customDate | date: "E" }}</p>

      <p>{{ customDate | date: "z" }}</p>

      <p>{{ customDate | date: "dd:MMM:yyyy hh-mm-ss z" }}</p>
    </div>
  `
})

export class AppComponent {
  customDate = "Thu Oct 30 2019 06:50:22 GMT+0530";
}

Let us check out the result for the above code:

// {{ customDate | date: "d" }}
   output: 30

// {{ customDate | date: "M" }}
   output: 10

// {{ customDate | date: "y" }}
   output: 2019

// {{ customDate | date: "s" }}
   output: 22

// {{ customDate | date: "m" }}
   output: 50

// {{ customDate | date: "h" }}
   output: 6

// {{ customDate | date: "H" }}
   output: 6

// {{ customDate | date: "E" }}
   output: Wed

// {{ customDate | date: "z" }}
   output: GMT+5

// {{ customDate | date: "dd:MMM:yyyy hh-mm-ss z" }}
   output: 30:Oct:2019 06-50-22 GMT+5

Angular 8|9 Pre-defined Date Format Examples

Angular offers various pre-defined Date formats, let us check one by one what are the values does the pre-defined date formats emit in Angular?

Assign the following date "Thu Oct 30 2019 06:50:22 GMT+0530" value.

‘short’ which is equivalent to ‘M/d/yy, h:mm a’

{{ date | date: "short" }}

// output: 10/30/19, 6:50 AM

‘medium’ which is equivalent to ‘MMM d, y, h:mm:ss a’

{{ date | date: "medium" }}

// output: Oct 30, 2019, 6:50:22 AM

‘long’ which is equivalent to ‘MMMM d, y, h:mm:ss a z’

{{ date | date: "long" }}

// output: October 30, 2019 at 6:50:22 AM GMT+5

‘full’ which is equivalent to ‘EEEE, MMMM d, y, h:mm:ss a zzzz’

{{ date | date: "full" }}

// output: Wednesday, October 30, 2019 at 6:50:22 AM GMT+05:30

‘shortDate’ which is equivalent to ‘M/d/yy’

{{ date | date: "shortDate" }}

// output: 10/30/19

‘mediumDate’ which is equivalent to ‘MMM d, y’

{{ date | date: "mediumDate" }}

// output: Oct 30, 2019

‘longDate’ which is equivalent to ‘MMMM d, y’

{{ date | date: "longDate" }}

// output: October 30, 2019

‘fullDate’ which is equivalent to ‘EEEE, MMMM d, y’

{{ date | date: "fullDate" }}

// output: Wednesday, October 30, 2019

‘shortTime’ which is equivalent to ‘h:mm a’

{{ date | date: "shortTime" }}

// output: 6:50 AM

‘mediumTime’ which is equivalent to ‘h:mm:ss a’

{{ date | date: "mediumTime" }}

// output: 6:50:22 AM

‘longTime’ which is equivalent to ‘h:mm:ss a z’

{{ date | date: "longTime" }}

// output: 6:50:22 AM GMT+5

‘fullTime’ which is equivalent to ‘h:mm:ss a zzzz’

{{ date | date: "fullTime" }}

// output: 6:50:22 AM GMT+05:30

Conclusion

Finally, we have completed Angular DatePipe tutorial, In this tutorial we learned what pre-defined date formats, what DatePipe operator is with some practical examples.

I hope you learned a lot from this tutorial. Check out Angular’s official documentation on DatePipe to know more about dates. Please share this article with others, thanks for reading!