AngularJS provides two different ways to change the format of the date. It can be achieved by the following approaches:
- Using HTML Template Binding
HTML Template Binding: In this method, we use pipe (|) operator. This pipe operator helps to convert a date object, number as per the required format (this includes – angular standard format and user-defined format). In angular, date objects can be modified based on any format, locale, and timezone using this operator. It formats a date in a readable format only.
|Format||Both predefined as well as user defined formats can be used in this attribute. The default value of this parameter is – ‘mediumDate’. Optional Parameter|
|TimeZone||The default value of timezone is – user’s local system timezone. We can provide value as offset (‘0530’) or standard UTC/GMT (IST) or continental US timezone abbreviation. Optional Parameter|
|Locale||The default value for locale is – ‘undefined’. For example, we can set it as – ‘en_US’.Optional Parameter|
Example: In this example, we are changing the current date into different formats. This date format includes the standard as well as user-defined formats.
When we run the code, it will provide the current date in different formats.
Input Current Date: 24th March 2020
Formatted Date with default parameters: Mar 24, 2020 Formatted Date with standard filter (ShortDate): 3/24/20 Formatted Date with standard filter (FullDate): Tuesday, March 24, 2020 Formatted date with user defined format:today is March 24, 2020
As we have seen that it is pretty easy to work with this pipe operator. Now we will take a look at the second approach.
Example: Here, we are using an angular controller to change the date format. The date is passed as a string and by using $filter filter, which is used to filter the object elements and array. It provides you the subset of an original array in the specified format.
Input Date in String Format: "2013-07-20T18:30:00.000Z" Output Date : 21/07/13
- Format a Date using ng-model in AngularJS
- PHP program to change date format
- How to print an array in table format using angularJS?
- AngularJS | ng-change Directive
- AngularJS | date Filter
- How to detect a route change in AngularJS ?
- PHP date() format when inserting into datetime in MySQL
- How to Get Current Date and Time in Various Format in Golang?
- How to set input type date in dd-mm-yyyy format using HTML ?
- AngularJS and W3.CSS
- AngularJS | API
- PHP | Format Specifiers
- D3.js format() Function
- Node | URL.format API
- Introduction to AngularJS
- How to use *ngIf else in AngularJS ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.