Yogesh Chauhan's Blog

Pre-defined DatePipe format options in Angular 9

in Angular on October 29, 2020

What does DatePipe do?

DatePipe formats a date value according to locale rules.


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


value (any) = The date expression: a Date object, a number (milliseconds since UTC epoch), or an ISO string. The parameter is required.

format (string) = The date/time components to include, using predefined options or a custom format string. It is optional. Default value is ‘mediumDate‘.

timezone (string) = A timezone offset (such as ‘+0430’), or a standard UTC/GMT or continental US timezone abbreviation. When not supplied, uses the end-user’s local system timezone. It is optional. Default is undefined.

locale (string) = A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default. See Setting your app locale. It is optional. Default is undefined.

Pre-defined format options

DatePipe Pre-defined format options Angular 9
Format equivalent to (en-US locale)
short M/d/yy, h:mm a (6/15/15, 9:03 AM).
medium MMM d, y, h:mm:ss a (Jun 15, 2015, 9:03:01 AM)
long MMMM d, y, h:mm:ss a z (June 15, 2015 at 9:03:01 AM GMT+1)
full EEEE, MMMM d, y, h:mm:ss a zzzz (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00)
shortDate M/d/yy (6/15/15)
mediumDate MMM d, y (Jun 15, 2015)
longDate MMMM d, y (June 15, 2015)
fullDate EEEE, MMMM d, y (Monday, June 15, 2015)
shortTime h:mm a (9:03 AM)
mediumTime h:mm:ss a (9:03:01 AM)
longTime h:mm:ss a z (9:03:01 AM GMT+1)
fullTime h:mm:ss a zzzz (9:03:01 AM GMT+01:00)

Credit: Angular.io

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
A quick introduction to API, REST API and PostmanMiscellaneousWhat does JSX do in React?ReactColleague UI Basics: The Search AreaColleagueHow to check if the page is the home page in WordPress?WordPressNumber Properties in JavaScriptJavaScriptUse eq() method in jQueryjQuery