Angular's Built-In DatePipe: A Closer Look

In this second part of our series, we shift our focus to the DatePipe, which is one of the standard pipes that Angular includes.

If the fundamentals of Angular pipes are new to you, consider reviewing this earlier post on the topic first.

Understanding DatePipe
The DatePipe is used to take a date value and present it in a format that is easy for humans to read, respecting locale-specific conventions.

Usage Syntax
{{ value | date [ : format [ : timezone [ : locale ] ] ] }}

This pipe is a part of the Common Module (a concept we will explore in detail in an upcoming segment on modules).

The input value for this pipe can come as a String, a number, or a standard date object.

Accepted Pipe Arguments
format -
This parameter dictates how the date should appear on screen.
It is a string data type.
It's not required and defaults to mediumDate.

timezone
This specifies which timezone you prefer your date to be displayed in.
Its type is string.
It is not mandatory, and the default is undefined.

locale
This is used to define rules based on language and regional formatting standards.
Also a string type.
Not mandatory, this will use the project's locale by default.

Let’s see this in action by looking at some code.

First, we'll update the component's TypeScript file.

Built-In Angular Pipes - DatePipe - Part 2 — figure 1

Within that file, we will introduce the code shown below:

  // Date in String
  dateInString = '01/05/2022';

  // Date in Number
  dateInNumber = Date.now();;

  // Date Object
  dateInObject = new Date();
Enter fullscreen mode Exit fullscreen mode

After that, switch to the component's template file to add the next block of code:

<h3>Date Pipe Demo</h3>
<p>{{ dateInString | date }}</p>
<p>{{ dateInNumber | date }}</p>
<p>{{ dateInObject | date }}</p>
Enter fullscreen mode Exit fullscreen mode

Once you've saved these changes, your application should render an output like this.

Built-In Angular Pipes - DatePipe - Part 2 — figure 2 In the example above, we're employing the DatePipe to format our date, passing the raw value in and receiving a formatted string back. Without specifying otherwise, the default output aligns with the medium format.

Exploring the format Parameter
Angular provides twelve built-in options for the format parameter:

  1. short
  2. medium
  3. long
  4. full
  5. shortDate
  6. mediumDate
  7. longDate
  8. fullDate
  9. shortTime
  10. mediumTime
  11. longTime
  12. fullTime

Let’s test all of these. Paste the code below into the template file.

<p><b>short:</b> {{ dateInString | date: "short" }}</p>
<p><b>medium:</b>{{ dateInString | date: "medium" }}</p>
<p><b>long:</b>{{ dateInString | date: "long" }}</p>
<p><b>full:</b>{{ dateInString | date: "full" }}</p>

<p><b>shortDate:</b>{{ dateInString | date: "shortDate" }}</p>
<p><b>mediumDate:</b>{{ dateInString | date: "mediumDate" }}</p>
<p><b>longDate:</b>{{ dateInString | date: "longDate" }}</p>
<p><b>fullDate:</b>{{ dateInString | date: "fullDate" }}</p>

<p><b>shortTime:</b>{{ dateInString | date: "shortTime" }}</p>
<p><b>mediumTime:</b>{{ dateInString | date: "mediumTime" }}</p>
<p><b>longTime:</b>{{ dateInString | date: "longTime" }}</p>
<p><b>fullTime:</b>{{ dateInString | date: "fullTime" }}</p>
Enter fullscreen mode Exit fullscreen mode

After running the app, you'll be able to see the output demonstrating each one.

Built-In Angular Pipes - DatePipe - Part 2 — figure 3 This view makes it clear how each predefined format controls the date's appearance.

Working with timezone
Beyond just the format, the pipe also lets you dictate a specific timezone. For instance, you could choose IST (Indian Standard Time) or UTC. There are two distinct approaches to specify this. Let's look at the code examples.

<b>Form 1</b>
<p>{{ dateInString | date: "short":"IST" }}</p>
<b>Form 2</b>
<p>{{ dateInString | date: "short":"+0530" }}</p>
Enter fullscreen mode Exit fullscreen mode
In the first instance, the timezone is identified by its name (like IST). In the second scenario, we're providing the offset—how much time is added or subtracted when compared to UTC. Both approaches should lead to the same displayed time. Should you need to represent a timezone that is behind UTC, prepend a '-' (minus) sign to the offset.

Built-In Angular Pipes - DatePipe - Part 2 — figure 4

To display time in the UTC zone specifically, the code to use would be:

<b>UTC Form 1</b>
<p>{{ dateInString | date: "short":"UTC" }}</p>
<b>UTC Form 2</b>
<p>{{ dateInString | date: "short":"+0000" }}</p>
Enter fullscreen mode Exit fullscreen mode

The locale Parameter
The third parameter that comes into play is locale. We'll take a deeper dive into its usage and effects when we cover the topic of localization more broadly.

We trust this has been a useful read.

If so, feel free to show your support by liking and sharing it.

Many thanks!!!
Happy Coding