Angular Date Pipe Tutorial with Date Format Examples

Angular Date Pipe Tutorial with Date Format Examples

In this Angular 8|9 DatePipe tutorial, we are going to learn how to use Date Pipe operator to format the date as per the locale rule. Angular 2 DatePipe offers various predefined date formats; furthermore, we can also customize the date formats using DatePipe.

In this Angular 8|9 DatePipe tutorial, we are going to learn how to use Date Pipe operator to format the date as per the locale rule. Angular 2 DatePipe offers various predefined date formats; furthermore, we can also customize the date formats using DatePipe.

Table of Contents

  1. What is Pipe Operator?
  2. Angular 8|9 Date Pipe Example
  3. Custom Date Formats in Angular 8/9
  4. Conclusion

1. What is Pipe Operator?

A pipe is an innovative feature in Angular, Pipe helps in transforming the values into the desired result.

2. Angular 8|9 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.

3. Custom Date Formats in Angular 8/9

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

3.1 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

3.2 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?

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

4. Conclusion

Finally, we have completed Angular 8/9 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!

angular web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Wondering how to upgrade your skills in the pandemic? Here's a simple way you can do it.

Corona Virus Pandemic has brought the world to a standstill. Countries are on a major lockdown. Schools, colleges, theatres, gym, clubs, and all other public

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.