AngularJS provides two different ways to change the format of the date. It can be achieved by the following approaches:
- Using HTML Template Binding
- Using JavaScript
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.
Syntax:
{{ dateVariable | date [ : format [ : timezone [ : locale ] ] ] }} |
Attributes Description:
Attribute | Description |
---|---|
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.
<!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.
$scope.dateVariable = $filter('date')("dateString", "dateformat"); |
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.
<!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