Angular 2: How to Write a Angular Date Pipe

The Angular DatePipe is a built-in pipe module that allows you to format dates in your Angular templates. It provides a convenient way to transform dates into different formats according to locale rules

Syntax

{{ value_expression | date[:format] [:timezone] [:locale] }}

We have to import the “Common Module” library in angular modules. If we use the angular 16+ version and we use standalone components then we also have to import this “Common Module” to utilize this inbuilt Date Pipe.
In syntax we have to pass pipe and date to use datepipe. We can also pass 3 arguments in the date pipe.

Arguments:

• 1st argument is format which is predefined else custom format we can use. 2nd argument.
• The 2nd argument is timezone. (e.g., ‘+0430’ or ‘GMT+0430’)
• The 3rd argument is locale. Used for date language translation like french for fr

Parameter

value_expression –
This is the date object or a number (milliseconds since UTC epoch) that you want to format.

format –
It’s optional & you can specify the date-time format. If not provided, it uses the medium-date format (‘MMM d, y, h:mm:ss a’).

timezone –
Specifies the time zone & its optional. It can be a string representing a time zone offset (e.g., ‘+0430’ or ‘GMT+0430’) or a time zone name from the IANA time zone database (e.g., ‘Asia/Kolkata’).

locale –
It is optional parameter in date pipe & specifies the locale code for the formatting rules. Defaults to the current locale of the application. E.g. (‘en-US’)

Pre-defined Formats

Custom Formats

Examples

1) Basic Example

<!-- Assuming myDate is a Date object in your component -->
<!-- component.html file —->

{{ myDate | date }}

Output (depending on locale and date) default locale will be us: Jul 25, 2024

2) Specifying a Format


{{ myDate | date: ‘short’ }}

Output (depending on locale and date) default locale will be us

7/25/24, 12:00 AM

Available formats include: ‘short’, ‘medium’, ‘long’, ‘full’, or a custom format like ‘dd/MM/yyyy’. Above having all the available formats and custom format you can use it as per your requirement.

3) Using Time Zone



<!-- component.html file —->
<!-- London time zone GMT+1 —->
<!-- myDate = 25-July-2024 09:58 PM —-→

{{ myDate | date: ‘yyyy-MMM-dd HH:mm:ss A’ : ‘+0100’ }}

Output will be 2024/July/25, 05:27:30 PM as per london timezone

4) Using Custom Format & Time Zone


{{ myDate | date: ‘yyyy-MMM-dd HH:mm:ss A’ : '+0100' }}

5) Locale Specific


{{ myDate | date: 'medium' : undefined : 'fr' }}

Output will be 25 juil. 2024 à 00:00:00 as per french locale.

The above pipe there is 3 argos we have passed medium for date format. Undefined is for passing undefined timezone & last is for locale

Key Points

• Locale: Determines the language and formatting rules used. It affects month and day names, symbols (like AM/PM), and formatting conventions.
• Time Zone: Specifies how the date and time should be adjusted based on different time zones.
• Format: Allows customization of how the date and time are displayed. Angular provides several predefined formats, and you can also specify a custom format using predefined format strings.

Considerations

• Performance: DatePipe relies on Angular’s internationalization (i18n) API, which means it’s affected by Angular’s locale data and performance considerations.
• Localization: Ensure that the locales and formats used are appropriate for your target audience to ensure a good user experience.

Summary

In summary, the Angular DatePipe is a powerful tool for formatting dates in Angular templates, providing flexibility through different formats, time zones, and locales to suit various application requirements.