Angular Built-in DatePipe Example | Pre-defined Format + Timezone + Locale + Custom Format

angular-built-in-datepipe-example-pre-defined-format-timezone-locale-custom-format-feature-image

In the tutorial, we show how to work with Angular Built-in DatePipe to display Date object in UI.

Related posts:
Angular 6 – KeyValue Pipe – *ngFor Loop through Object, Map example
Angular 6 Service – with Observable Data for Asynchronous Operation
Angular 6 Routing/Navigation – with Angular Router Service
Angular 6 Template Driven Form – NgModel for Two-Way Data Binding

Related pages:

Angular DatePipe

Syntax

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

  • value_expression can be a Date object, UTC milliseconds number or ISO String
  • format -> using predefined options or a custom format string. Optional. Default is 'mediumDate'.
  • timezone -> a timezone offset or a standard UTC/GMT or continental US timezone. Optional. Default is undefined.
  • locale -> en-US by default. Optional. Default is undefined.
Pre-defined Format
Pre-defined Equivalent To Example View
'short' 'M/d/yy, h:mm a' 8/31/18, 9:27 AM
'medium' 'MMM d, y, h:mm:ss a' Aug 31, 2018, 9:27:28 AM
'long' 'MMMM d, y, h:mm:ss a z' August 31, 2018 at 9:52:31 AM GMT+7
'full' 'EEEE, MMMM d, y, h:mm:ss a zzzz' Friday, August 31, 2018 at 9:52:31 AM GMT+07:00
'shortDate' 'M/d/yy' 8/31/18
'mediumDate' 'MMM d, y' Aug 31, 2018
'longDate' 'MMMM d, y' August 31, 2018
'fullDate' 'EEEE, MMMM d, y' Friday, August 31, 2018
'shortTime' 'h:mm a' 9:52 AM
'mediumTime' 'h:mm:ss a' 9:52:31 AM
'longTime' 'h:mm:ss a z' 9:52:31 AM GMT+7
'fullTime' 'h:mm:ss a zzzz' 9:52:31 AM GMT+07:00
Use with TimeZone

Example:

today | date:'full' -> view as Friday, August 31, 2018 at 9:52:31 AM GMT+07:00

Now we provide a timezone GMT-8, full code today | date:'full':'GMT-8'
-> view as Thursday, August 30, 2018 at 6:52:31 PM GMT-08:00

Custom Format

Example:

today | date:'yyyy-LLLL-dd EEEE hh:mm:ss a z' -> view as: 2018-August-31 Friday 09:52:31 AM GMT+7

Practice

DatePipe Component

We create a datepipe component as below code:

datepipe.component.ts ->

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

@Component({
  selector: 'app-datepipe',
  templateUrl: './datepipe.component.html',
})
export class DatepipeComponent {
  today: number = Date.now();
}

datepipe.component.html ->

Pre-defined format

  • 'short': equivalent to 'M/d/yy, h:mm a' ({{today | date:'short'}})
  • 'medium': equivalent to 'MMM d, y, h:mm:ss a' ({{today | date:'medium'}})
  • 'long': equivalent to 'MMMM d, y, h:mm:ss a z' ({{today | date:'long'}})
  • 'full': equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz' ({{today | date:'full'}})
  • 'shortDate': equivalent to 'M/d/yy' ({{today | date:'shortDate'}})
  • 'mediumDate': equivalent to 'MMM d, y' ({{today | date:'mediumDate'}})
  • 'longDate': equivalent to 'MMMM d, y' ({{today | date:'longDate'}})
  • 'fullDate': equivalent to 'EEEE, MMMM d, y' ({{today | date:'fullDate'}})
  • 'shortTime': equivalent to 'h:mm a' ({{today | date:'shortTime'}})
  • 'mediumTime': equivalent to 'h:mm:ss a' ({{today | date:'mediumTime'}})
  • 'longTime': equivalent to 'h:mm:ss a z' ({{today | date:'longTime'}})
  • 'fullTime': equivalent to 'h:mm:ss a zzzz' ({{today | date:'fullTime'}})

Use with TimeZone

Default TimeZone, syntax date:'full' => {{today | date:'full'}}

Provide a TimeZone GMT-8, syntax date:'full':'GMT-8' => {{today | date:'full':'GMT-8'}}

Custom Format

'yyyy-LLLL-dd EEEE hh:mm:ss a z' ({{today | date:'yyyy-LLLL-dd EEEE hh:mm:ss a z'}})
Result

angular-6-date-pipe-pre-defined-format-timezone-locale-custom-format-usage-example

SourceCode

Projct structure ->

angular-6-date-pipe-pre-defined-format-timezone-locale-custom-format-project-structure

– SourceCode:

AngularDatePipe

Leave a Reply

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