Stop Fighting with Date Formats—Angular’s DatePipe Has You Covered | HackerNoon

Angular offers a DatePipe which helps us to show date and time in various formats by converting the raw date value into structured format using template expressions. Since every project or use case may require a specific date format, this pipe provides the flexibility to meet those needs effortlessly.

Syntax

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

DatePipe runs only when it detects a pure change in the input value. A pure change occurs when a primitive value is modified or the object reference changes. Modifying a Date object does not trigger the pipe to re-render. To ensure the pipe executes, a new Date object must be created.

Angular predefined format options

Custom format options

We can also construct a format string using symbols to define the components of a date-time value as defined in the official documentation here.

Implementation

In this post, we’ll walk through setting up a simple project with a date-pipe-example component, implementing various date formats, and testing the changes using Google Chrome Developer Tools’ sensor features.

Install angular if it is not already installed

npm install -g @angular/cli

Create an angular app and change to directory

ng new angular-examples
cd angular-examples

Install dependencies

npm install

Generate new component in the components folder

ng generate component date-pipe-example src/app/components

Adding a direct route datapipe in the app.routes.ts file to the example component for testing purposes

import { Routes } from '@angular/router';
import { DatePipeExampleComponent } from '../app/components/date-pipe-example/date-pipe-example.component';

export const routes: Routes = [
    {
        path: 'datepipe',
        component: DatePipeExampleComponent
    }
];

Now, let’s add currentDate to the component date-pipe-example.component.ts and include various date formats in the template.

import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-date-pipe-example',
  imports: [DatePipe],
  templateUrl: './date-pipe-example.component.html',
  styleUrl: './date-pipe-example.component.scss'
})
export class DatePipeExampleComponent {
  currentDate = new Date();
}

Template date-pipe-example.component.html with default format without any pipe

<main class="main-container">
    <article class="container">
        <header>
            <h1>Welcome to Angular Date pipe examples</h1>
          </header>
          <section>
            <section>
                <h4>Current date in Default format</h4>
                <div>input: <i>currentDate</i></div>
                <p>{{ currentDate}}</p>
            </section>  
          </section>
    </article>
</main>

Output

Wed Mar 19 2025 13:34:59 GMT-0700 (Pacific Daylight Time)

Here are various formats with input and output

date-pipe-example.component.html

<main class="main-container">
    <article class="container">
        <header>
            <h1>Welcome to Angular Date pipe examples</h1>
          </header>
          <section>
            <section>
                <h4>Current date in Default format</h4>
                <div>input: <i>currentDate</i></div>
                <p>{{ currentDate}}</p>
            </section>  
            <section>
                <h4>Current date with <i>date</i> pipe</h4>
                <div>input: <i>currentDate | date</i></div>
                <p>{{ currentDate | date }}</p>
            </section>  
            <section>
                <h4>Current date with <i>date</i> pipe and <i>short</i> format</h4>
                <div>input: <i>currentDate | date: 'short'</i></div>
                <p>{{ currentDate | date: 'short'}}</p>
            </section>  
            <section>
                <h4>Current date with <i>date</i> pipe and <i>mediumTime</i> format</h4>
                <div>input: <i>currentDate | date: 'mediumTime'</i></div>
                <p>{{ currentDate | date: 'mediumTime'}}</p>
            </section> 
            <section>
                <h4>Current date with <i>date</i> pipe and <i>custom</i> format</h4>
                <div>input: <i>currentDate | date: 'yyyy-MM-dd HH:mm:ss'</i></div>
                <p>{{ currentDate | date: 'yyyy-MM-dd HH:mm:ss'}}</p>
            </section> 
            <section>
                <h4>Current date with <i>date</i> pipe and <i>medium</i> format and <i>time</i> zone</h4>
                <div>input: <i>currentDate | date: 'medium':'IST'</i></div>
                <p>{{ currentDate | date: 'medium':'IST' }}</p>
            </section> 
            <section>
                <h4>Current date with <i>date</i> pipe and <i>medium</i> format and <i>time zone</i> and <i>locale</i></h4>
                <div>input: <i>currentDate | date: 'medium':'GMT':'en-GB'</i></div>
                <p>{{ currentDate | date: 'medium':'GMT':'en-GB' }}</p>
            </section> 
          </section>
    </article>
</main>

Response

Current date having date pipe
input: currentDate | date

output:
Mar 19, 2025

Current date having date pipe and short format
input: currentDate | date: 'short'

output:
3/19/25, 1:34 PM

Current date having date pipe and mediumTime format
input: currentDate | date: 'mediumTime'

output:
1:34:59 PM

Current date having date pipe and custom format
input: currentDate | date: 'yyyy-MM-dd HH:mm:ss'

output:
2025-03-19 13:34:59

Current date having date pipe and medium format and time zone
input: currentDate | date: 'medium':'IST'

output:
Mar 19, 2025, 1:34:59 PM

Current date having date pipe and medium format and time zone and locale
input: currentDate | date: 'medium':'GMT':'en-GB'

output:
Mar 19, 2025, 8:34:59 PM

The fully deployed example is available here.

Testing Across Time Zones with Chrome DevTools

This guide provides insight into how the Angular Date Pipe works with different formats. However, a common challenge is testing across various time zones and locales to see how the dates appear in the UI. In such cases, we can leverage developer tools’ sensor settings for live testing.

Google Chrome Developer Console Sensor Tools

The Google Chrome Developer Console Sensor Tools allow developers to simulate different environmental conditions for testing web applications. These tools are part of the Chrome DevTools and are useful for testing scenarios like geolocation, device orientation, and accelerometer values.

How to access Sensors:

Depending on your operating system, press the following to open the developer tools first then command menu.

Developer tools:

On MacOS, Command+Shift+I

On Windows, Linux, or ChromeOS, Control+Shift+I

Command menu:

On MacOS, Command+Shift+P

On Windows, Linux, or ChromeOS, Control+Shift+P

Alternatively, we can open theDeveloper Console, click the three-dot menu, go to More Tools, and select Sensors, as shown in the screenshot below.

By default Sensors will No override option selected.

Next, open the Location dropdown, where you’ll find several predefined locations to override. Select a location from the list, refresh the page, and observe the changes in the result.

We could also add new locations by clicking on Manage button then ‘Add location in the Locations settings panel.

At times, the user or browser location may not be available, which can also be tested using the Location dropdown with option Location unavailable

The full repository for this guide project can be found here.

Conclusion

In this post, we explored the power of Angular’s DatePipe and its flexibility in formatting dates and times to meet the varying needs of different projects. We built a simple Angular component to show various date formats and explained how to use Google Chrome Developer Tools’ sensor features to test date displays across different time zones and locales.

For large scale projects that cover multiple time zones and have users from all over the world, handling dates and times correctly is important to providing a smooth and reliable user experience. Angular’s DatePipe eases this challenge by providing customizable formatting options and a smooth integration with different time zones and locales.  Using Chrome’s DevTools to test date formats in different environmental conditions, developers can ensure that the applications they build are correct for users around the world and, in turn, make the application more usable and reliable.