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..

app.component.html

<div>
  <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>
</div>

app.compoent.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'DatePipe';
  today: number = Date.now();
}

OUTPUT:

Pre-defined Format for Date 

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