Pre-defined DatePipe format options in Angular 9
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
Formatequivalent to (en-US locale)
shortM/d/yy, h:mm a (6/15/15, 9:03 AM).
mediumMMM d, y, h:mm:ss a (Jun 15, 2015, 9:03:01 AM)
longMMMM d, y, h:mm:ss a z (June 15, 2015 at 9:03:01 AM GMT+1)
fullEEEE, MMMM d, y, h:mm:ss a zzzz (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00)
shortDateM/d/yy (6/15/15)
mediumDateMMM d, y (Jun 15, 2015)
longDateMMMM d, y (June 15, 2015)
fullDateEEEE, MMMM d, y (Monday, June 15, 2015)
shortTimeh:mm a (9:03 AM)
mediumTimeh:mm:ss a (9:03:01 AM)
longTimeh:mm:ss a z (9:03:01 AM GMT+1)
fullTimeh:mm:ss a zzzz (9:03:01 AM GMT+01:00)

Credit: Angular.io


Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 How to uninstall Cocoapods from the Mac OS? #6 Solution to “TypeError: ‘x’ is not iterable” in Angular 9

Recently Posted

Feb 24 WordPress: How to loop through a repeater field in ACF? Feb 24 How to get ACF values from custom post type? Feb 24 WordPress get_posts Examples Feb 24 How to modify the latest post array using get_posts() in WordPress? Feb 22 WordPress: How to get ACF field values from another post? Feb 22 WordPress: How to print ACF repeater field values?

You might also like these

How to show widgets on the Appearance tab in WordPress?WordPressHow to create a Star Ratings using CSS?CSSHow to Remove PHP File Extensions From Your Website URLs?PHPHow to obfuscate JavaScript code to hide it from View Source?JavaScriptHow to Recognize an Array in JavaScript?JavaScriptHow to Use password_hash and password_verify to Secure Your User’s Data (Especially Passwords)?PHP