In this article I will explain how to use the AngularJS Date Filter ($filter) function to format and display date and time.
This article explains how to display date and time in different formats using AngularJS Templates and ng-bind directive.
Display formatted Date and Time using AngularJS Template
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Syntax
{{<Date Object> | date: '<Date Format>'}}
Example
{{CurrentDate | date: 'dd/MM/yyyy'}}
In the below example, there are four HTML SPAN elements data bounded with AngularJS Templates. The CurrentDate variable inside the controller has been initialized with the JavaScript Date object.
The CurrentDate variable is displayed in the following date and time formats.
1. dd/MM/yyyy – Example 10/05/2015.
2. dd, MMMM yyyy – Example 10, May 2015.
3. HH:mm:ss – 24 Hour Time format, upper case “HH” represent 24 hours. Example 22:15.
4. hh:mm:ss a– 12 Hour Time format, lower case “hh” represent 12 hours. Lower case “a” represents Time of the day. Example 10:15 PM.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.CurrentDate = new Date();
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<u>dd/MM/yyyy format</u><br /><span>{{CurrentDate | date:'dd/MM/yyyy'}}</span>
<br />
<br />
<u>dd, MMMM yyyy format</u><br /><span>{{CurrentDate | date:'dd, MMMM yyyy'}}</span>
<br />
<br />
<u>24 Hour time</u><br /><span>{{CurrentDate | date:'HH:mm:ss'}}</span>
<br />
<br />
<u>12 Hour time</u><br /><span>{{CurrentDate | date:'hh:mm:ss a'}}</span>
</div>
</body>
</html>
Display formatted Date and Time using AngularJS ng-bind directive
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
In the below example, there are four HTML SPAN data bounded with AngularJS ng-bind directive to four model variables.
There are cases when you want to format date and time within the Controller and in such case the AngularJS $format function can be useful.
The four variables in the Controller are displaying the following date and time formats.
1. dd/MM/yyyy – Example 10/05/2015.
2. dd, MMMM yyyy – Example 10, May 2015.
3. HH:mm:ss – 24 Hour Time format, upper case “HH” represent 24 hours. Example 22:15.
4. hh:mm:ss a– 12 Hour Time format, lower case “hh” represent 12 hours. Lower case “a” represents Time of the day. Example 10:15 PM.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $filter) {
var date = new Date();
$scope.ddMMyyyy = $filter('date')(new Date(), 'dd/MM/yyyy');
$scope.ddMMMMyyyy = $filter('date')(new Date(), 'dd, MMMM yyyy');
$scope.HHmmss = $filter('date')(new Date(), 'HH:mm:ss');
$scope.hhmmsstt = $filter('date')(new Date(), 'hh:mm:ss a');
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<u>dd/MM/yyyy format</u><br /><span ng-bind = "ddMMyyyy"></span>
<br />
<br />
<u>dd, MMMM yyyy format</u><br /><span ng-bind = "ddMMMMyyyy"></span>
<br />
<br />
<u>24 Hour time</u><br /><span ng-bind = "HHmmss"></span>
<br />
<br />
<u>12 Hour time</u><br /><span ng-bind = "hhmmsstt"></span>
</div>
</body>
</html>
Screenshot
![AngularJS Date Filter function Example: Format Date and Time in AngularJS]()
Demo
Downloads
