Angular 8/9/10 Date Pipe Tutorial with Date Format Examples

Last updated on by Digamber
In this Angular 8/9/10 DatePipe tutorial, we are going to learn how to use Date Pipe operator to format the date as per the locale rule. 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 8/9/10 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 8/9/10

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 8/9/10?

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 8/9/10 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!