How to change the date format using AngularJS ?

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

AngularJS-Misc
HTML-Misc
Picked
AngularJS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.