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 Syntax {{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }} {{ 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 Angular predefined format options Option

Equivalent to

Examples (given in en-US locale)



'short'

'M/d/yy, h:mm a'

6/15/15, 9:03 AM



'medium'

'MMM d, y, h:mm:ss a'

Jun 15, 2015, 9:03:01 AM



'long'

'MMMM d, y, h:mm:ss a z'

June 15, 2015 at 9:03:01 AM GMT+1



'full'

'EEEE, MMMM d, y, h:mm:ss a zzzz'

Monday, June 15, 2015 at 9:03:01 AM GMT+01:00



'shortDate'

'M/d/yy'

6/15/15



'mediumDate'

'MMM d, y'

Jun 15, 2015



'fullDate'

'EEEE, MMMM d, y'

Monday, June 15, 2015



'shortTime'

'h:mm a'

9:03 AM



'mediumTime'

'h:mm:ss a'

9:03:01 AM



'longTime'

'h:mm:ss a z'

9:03:01 AM GMT+1



'fullTime'

'h:mm:ss a zzzz'

9:03:01 AM GMT+01:00 Option

Equivalent to

Examples (given in en-US locale)



'short'

'M/d/yy, h:mm a'

6/15/15, 9:03 AM



'medium'

'MMM d, y, h:mm:ss a'

Jun 15, 2015, 9:03:01 AM



'long'

'MMMM d, y, h:mm:ss a z'

June 15, 2015 at 9:03:01 AM GMT+1



'full'

'EEEE, MMMM d, y, h:mm:ss a zzzz'

Monday, June 15, 2015 at 9:03:01 AM GMT+01:00



'shortDate'

'M/d/yy'

6/15/15



'mediumDate'

'MMM d, y'

Jun 15, 2015



'fullDate'

'EEEE, MMMM d, y'

Monday, June 15, 2015



'shortTime'

'h:mm a'

9:03 AM



'mediumTime'

'h:mm:ss a'

9:03:01 AM



'longTime'

'h:mm:ss a z'

9:03:01 AM GMT+1



'fullTime'

'h:mm:ss a zzzz'

9:03:01 AM GMT+01:00 Option

Equivalent to

Examples (given in en-US locale) Option Option Equivalent to Equivalent to Examples (given in en-US locale) Examples (given in en-US locale) en-US 'short'

'M/d/yy, h:mm a'

6/15/15, 9:03 AM 'short' 'short' 'short' 'M/d/yy, h:mm a' 'M/d/yy, h:mm a' 'M/d/yy, h:mm a' 6/15/15, 9:03 AM 6/15/15, 9:03 AM 6/15/15, 9:03 AM 'medium'

'MMM d, y, h:mm:ss a'

Jun 15, 2015, 9:03:01 AM 'medium' 'medium' 'medium' 'MMM d, y, h:mm:ss a' 'MMM d, y, h:mm:ss a' 'MMM d, y, h:mm:ss a' Jun 15, 2015, 9:03:01 AM Jun 15, 2015, 9:03:01 AM Jun 15, 2015, 9:03:01 AM 'long'

'MMMM d, y, h:mm:ss a z'

June 15, 2015 at 9:03:01 AM GMT+1 'long' 'long' 'long' 'MMMM d, y, h:mm:ss a z' 'MMMM d, y, h:mm:ss a z' 'MMMM d, y, h:mm:ss a z' June 15, 2015 at 9:03:01 AM GMT+1 June 15, 2015 at 9:03:01 AM GMT+1 June 15, 2015 at 9:03:01 AM GMT+1 'full'

'EEEE, MMMM d, y, h:mm:ss a zzzz'

Monday, June 15, 2015 at 9:03:01 AM GMT+01:00 'full' 'full' 'full' 'EEEE, MMMM d, y, h:mm:ss a zzzz' 'EEEE, MMMM d, y, h:mm:ss a zzzz' 'EEEE, MMMM d, y, h:mm:ss a zzzz' Monday, June 15, 2015 at 9:03:01 AM GMT+01:00 Monday, June 15, 2015 at 9:03:01 AM GMT+01:00 Monday, June 15, 2015 at 9:03:01 AM GMT+01:00 'shortDate'

'M/d/yy'

6/15/15 'shortDate' 'shortDate' 'shortDate' 'M/d/yy' 'M/d/yy' 'M/d/yy' 6/15/15 6/15/15 6/15/15 'mediumDate'

'MMM d, y'

Jun 15, 2015 'mediumDate' 'mediumDate' 'mediumDate' 'MMM d, y' 'MMM d, y' 'MMM d, y' Jun 15, 2015 Jun 15, 2015 Jun 15, 2015 'fullDate'

'EEEE, MMMM d, y'

Monday, June 15, 2015 'fullDate' 'fullDate' 'fullDate' 'EEEE, MMMM d, y' 'EEEE, MMMM d, y' 'EEEE, MMMM d, y' Monday, June 15, 2015 Monday, June 15, 2015 Monday, June 15, 2015 'shortTime'

'h:mm a'

9:03 AM 'shortTime' 'shortTime' 'shortTime' 'h:mm a' 'h:mm a' 'h:mm a' 9:03 AM 9:03 AM 9:03 AM 'mediumTime'

'h:mm:ss a'

9:03:01 AM 'mediumTime' 'mediumTime' 'mediumTime' 'h:mm:ss a' 'h:mm:ss a' 'h:mm:ss a' 9:03:01 AM 9:03:01 AM 9:03:01 AM 'longTime'

'h:mm:ss a z'

9:03:01 AM GMT+1 'longTime' 'longTime' 'longTime' 'h:mm:ss a z' 'h:mm:ss a z' 'h:mm:ss a z' 9:03:01 AM GMT+1 9:03:01 AM GMT+1 9:03:01 AM GMT+1 'fullTime'

'h:mm:ss a zzzz'

9:03:01 AM GMT+01:00 'fullTime' 'fullTime' 'fullTime' 'h:mm:ss a zzzz' 'h:mm:ss a zzzz' 'h:mm:ss a zzzz' 9:03:01 AM GMT+01:00 9:03:01 AM GMT+01:00 9:03:01 AM GMT+01:00 Custom 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. here Implementation 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. date-pipe-example Install angular if it is not already installed npm install -g @angular/cli npm install -g @angular/cli Create an angular app and change to directory ng new angular-examples
cd angular-examples ng new angular-examples
cd angular-examples Install dependencies npm install npm install Generate new component in the components folder ng generate component date-pipe-example src/app/components 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 datapipe app.routes.ts 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
    }
]; 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. currentDate date-pipe-example.component.ts 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();
} 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 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>
    </article>
</main> <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) 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 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> <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 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. here Testing Across Time Zones with Chrome DevTools 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 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. Google Chrome Developer Console Sensor Tools How to access Sensors: How to access Sensors: Depending on your operating system, press the following to open the developer tools first then command menu. developer tools command menu Developer tools: Developer tools: On MacOS, Command+Shift+I Command+Shift+I On Windows, Linux, or ChromeOS, Control+Shift+I ChromeOS, Control+Shift+I Command menu: Command menu: On MacOS, Command+Shift+P Command+Shift+P On Windows, Linux, or ChromeOS, Control+Shift+P 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. Developer Console More Tools Sensors By default Sensors will No override option selected. No override 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. Manage Add location At times, the user or browser location may not be available, which can also be tested using the Location dropdown with option Location unavailable Location Location unavailable The full repository for this guide project can be found here. here Conclusion 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.

This story contains new, firsthand information uncovered by the writer.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story will praise and/or roast a product, company, service, game, or anything else people like to review on the Internet.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Cut Load Times in Half with These Next.js Tweaks

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Cut Load Times in Half with These Next.js Tweaks

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps