Angular Date Pipe Tutorial with Date Format Examples

In this Angular 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.

 

Angular 14 Date Pipe Example

The Angular Date Pipe is a built-in pipe in Angular that formats a date value according to a specified format. The Date Pipe accepts various formats such as year, month, day, hour, minute, and second.

To use the Date Pipe in your Angular application, you need to import the DatePipe module from the '@angular/common' package in your component.ts file.

Here is an example of using the Date Pipe in an Angular component template:

The current date and time is {{ currentDate | date: 'short' }}

In the above example, currentDate is a variable containing the current date and time, and the date pipe is used to format the date value using the 'short' format.

Now, let's take a look at some common date formats that can be used with the Angular Date Pipe:

1. Short Date Format: 'short'

The 'short' format displays the date in the format 'M/d/yy, h:mm a'. Here is an example: 

The current date is {{ currentDate | date: 'shortDate' }}

2. Long Date Format: 'long'

The 'long' format displays the date in the format 'MMMM d, y, h:mm:ss a z'. Here is an example:

The current date is {{ currentDate | date: 'long' }}

3. Custom Date Format:

You can also create a custom date format using the following pattern:

• y: year
• M: month
• d: day
• h: hour
• m: minute
• s: second
• a: AM/PM marker
• Z: timezone offset
  

Here are some examples:

The current year is {{ currentDate | date: 'y' }}
The current date is {{ currentDate | date: 'M/d/yyyy' }}
The current time is {{ currentDate | date: 'h:mm:ss a' }}
The current timezone is {{ currentDate | date: 'Z' }}

Note that you can also combine the above formats to create a custom format that suits your needs.