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-definedEquivalent ToExample 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 *

*