DatePipe In Angular

DatePipe is executed only when it detects a change to the input value.

A modified object reference or a modification to a simple input value are both considered pure changes.

you must create a new Date object to ensure that the pipe is executed.

With Angular, just the en-US locale data is included. It is necessary to import the relevant locale data in order to localise dates in a different language.

Let’s see example with some date formats..


  <p>Today is {{today | date}}</p>
  <p>{{today | date:'fullDate'}}</p>
  <p>The time is {{today | date:'h:mm a z'}}</p>
  <p>{{ today | date:'medium' }}</p>
  <p>{{ today | date:'shortTime' }}  </p>
  <p>{{ today | date:'mm:ss' }}  </p>
  <p>{{ today | date:'M/d/yy, h:mm a' }}  </p>
  <p>{{ today | date:'hh:mma [dd/LL/yy] ' | lowercase }}  </p>


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

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'DatePipe';
  today: number =;


Pre-defined Format for Date 

Option Format Result
shortDate ‘M/d/yy’ 1/20/23
mediumDate ‘MMM d, y’ Jan 20, 2023
longDate ‘MMMM d, y’ January 20, 2023
fullDate ‘EEEE, MMMM d, y’ Friday, January 20, 2023
shortTime ‘h:mm a’ 4:06 PM
mediumTime ‘h:mm:ss a’ 4:06:35 PM
longTime ‘h:mm:ss a z’ 4:06:40 PM GMT+5
fullTime ‘h:mm:ss a zzzz’ 4:07:34 PM GMT+05:30
full ‘EEEE, MMMM d, y, h:mm:ss a zzzz’ Friday, January 20, 2023, 4:08:25 PM GMT+05:30

You may create a format string by using symbols to indicate a date-time value’s constituent parts.

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories