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

datepipe.component.html ->

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

By grokonez | August 31, 2018.



Related Posts


Got Something To Say:

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

*