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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </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.