How to change the date format using AngularJS ?
Last Updated :
01 Aug, 2022
In this article, we will see how to change the date format using AngularJS. AngularJS provides 2 different ways to change the format of the date. It can be achieved by the following approaches:
- Using HTML Template Binding
- Using JavaScript Controller
HTML Template Binding: In this method, we use the pipe (|) operator. This pipe operator helps to convert a date object or 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.
Syntax:
{{ dateVariable | date [ : format [ : timezone [ : locale ] ] ] }}
Attribute Values:
- Format: Both the predefined, as well as user-defined formats, can be used in this attribute. The default value of this parameter is -‘mediumDate’. It is an optional parameter.
- TimeZone: The default value of timezone is the user’s local system timezone. We can provide value as an offset (‘0530’) or standard UTC/GMT (IST) or continental US timezone abbreviation. It is an optional parameter.
- Locale: The default value for a locale is -‘undefined’. For example, we can set it as – ‘en_US’. It is an optional parameter.
Example 1: In this example, we are changing the current date into different formats. This date format includes the standard as well as user-defined formats.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
</ head >
< body >
< div ng-app = "myApp"
ng-controller = "datCtrl" >
< p >
Formatted Date with default parameters:
{{ dateValue | date }}
</ p >
< p >
Formatted Date with standard filter
(ShortDate): {{ dateValue | date:'shortDate' }}
</ p >
< p >
Formatted Date with standard filter
(FullDate): {{ dateValue | date:'fullDate' }}
</ p >
< p >
Formatted date with user defined format:
{{ dateValue | date : "'today is ' MMMM d, y" }}
</ p >
</ div >
< script >
var app = angular.module('myApp', []);
app.controller('datCtrl', function($scope) {
$scope.dateValue = new Date();
});
</ script >
</ body >
</ html >
|
When we run the code, it will provide the current date in different formats.
Input Current Date: 24th March 2020
Output:
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.
Using JavaScript Controller: This approach is helpful if you have a date in string format.
Syntax:
$scope.dateVariable = $filter(‘date’)(“dateString”, “dateformat”);
Example 2: Here, we are using an angular controller to change the date format. The date is passed as a string & by using the $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.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< title >
How to change the date format using AngularJS ?
</ title >
</ head >
< body >
< div ng-app = "MyApp" >
< div ng-controller = "MyCtrl" >
Input Date in String Format: {{myDate}}
< br > Output Date : {{myDateFiltered}}
</ div >
</ div >
< script >
var app = angular.module('MyApp', []);
app.controller('MyCtrl', ['$scope', '$filter',
function($scope, $filter) {
$scope.myDate = new Date('2013/07/21');
$scope.myDateFiltered = $filter('date')
($scope.myDate, 'dd/MM/yy');
}
]);
</ script >
</ body >
</ html >
|
Output:
Input Date in String Format: "2013-07-20T18:30:00.000Z"
Output Date : 21/07/13
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...