AngularJS | date Filter - GeeksforGeeks

21 Jan, 2022
AngularJS date filter is used to convert a date into a specified format. When the date format is not specified, the default date format is ‘MMM d, yyyy’. Syntax:  
{{ date | date : format : timezone }}
Parameter Values: The date filter contains format and timezone parameters which is optional.Some common values used in format are as follow:  
‘yyyy’ – define year ex. 2019
‘yy’ – define year ex. 19
‘y’ – define year ex. 2019
‘MMMM’ – define month ex. April
‘MMM’ – define month ex. Apr
‘MM’ – define month ex. 04
‘dd’ – define day ex. 09
‘d’ – define day ex. 9
‘hh’ – define hour in AM/PM
‘h’ – define hour in AM/PM
‘mm’ – define minute
‘m’ – define minute
‘ss’ – define second
‘s’ – define second
Some predefined values for format are as follow:  
“short” – equivalent to “M/d/yy h:mm a”
“medium” – equivalent to “MMM d, y h:mm:ss a”
“shortDate” – equivalent to “M/d/yy” (5/7/19)
“mediumDate” – equivalent to “MMM d, y” (May 7, 2019)
“longDate” – equivalent to “MMMM d, y” (May 7, 2019)
“fullDate” – equivalent to “EEEE, MMMM d, y” (Tuesday, May 7, 2019)
“shortTime” – equivalent to “h:mm a” (2:35 AM)
“mediumTime” – equivalent to “h:mm:ss a” (2:35:05 AM)
Example 1: This example display the date in given format.  
html
<!DOCTYPE html><html>    <head>        <title>Date Filter</title>                 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">        </script>    </head>         <body>          <div ng-app="gfgApp" ng-controller="dateCntrl">              <p>{{ today | date : "dd.MM.y" }}</p>          </div>          <script>            var app = angular.module('gfgApp', []);            app.controller('dateCntrl', function($scope) {                $scope.today = new Date();            });        </script>    </body></html>
Output:  
07.05.2019
Example 2: This example display the time in specified format.  
html
<!DOCTYPE html><html>    <head>        <title>Date Filter</title>                 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">        </script>    </head>         <body>          <div ng-app="gfgApp" ng-controller="dateCntrl">              <p>{{ today| date : 'mediumTime'}}</p>          </div>          <script>            var app = angular.module('gfgApp', []);            app.controller('dateCntrl', function($scope) {                $scope.today = new Date();            });        </script>    </body></html>
Output:  
2:37:23 AM
Example 3: This example display the date in specified format. 
html
<!DOCTYPE html><html>    <head>        <title>Date Filter</title>                 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">        </script>    </head>         <body>          <div ng-app="gfgApp" ng-controller="dateCntrl">              <p>{{ today| date }}</p>          </div>          <script>            var app = angular.module('gfgApp', []);            app.controller('dateCntrl', function($scope) {                $scope.today = new Date();            });        </script>    </body></html>
Output: 
May 7, 2019
 
saurabh1990aror
gpr1ys31mnq4doxe2jkbgw6ift0z44tvlp957x8h
Picked
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Express.js express.Router() Function
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to set input type date in dd-mm-yyyy format using HTML ?
How to set the default value for an HTML <select> element ?
Installation of Node.js on Linux
How to set the default value for an HTML <select> element ?
How to insert spaces/tabs in text using HTML/CSS?
How to Insert Form Data into Database using PHP ?