How to change the date format using AngularJS ?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

$scope.dateVariable = $filter('date')("dateString", "dateformat");

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Input Date in String Format: "2013-07-20T18:30:00.000Z"
Output Date : 21/07/13

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. 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.