Here we will learn what is date filter in angularjs, use of date filter in angularjs and we will see how to implement date filter in angularjs applications with simple example.
In angularjs, date filter is used to convert date to string based on the given format. In angularjs, we can convert date to multiple formats using date filter.
Generally the syntax of date filter in angularjs will be like as shown following
In angularjs we have different type of date formats available with date filter. Following table shows different type of date formats available with date filter in angularjs.
Format | Expression | Result |
---|---|---|
yyyy (Year) |
{{sampledate | date:"yyyy" }} |
2016 |
yy (Year) |
{{sampledate | date:"yy" }} |
16 |
y (Year) |
{{sampledate | date:"y" }} |
2016 |
MMMM (Month) |
{{sampledate | date:"MMMM" }} |
February |
MMM (Month) |
{{sampledate | date:"MMM" }} |
Feb |
MM (Month) |
{{sampledate | date:"MM" }} |
02 |
M (Month) |
{{sampledate | date:"M" }} |
2 |
dd (Date) |
{{sampledate | date:"dd" }} |
28 |
d (Date) |
{{sampledate | date:"d" }} |
28 |
EEEE (Day) |
{{sampledate | date:"EEEE" }} |
Sunday |
EEE (Day) |
{{sampledate | date:"EEE" }} |
Sun |
HH (24 Hours Format) |
{{sampledate | date:"HH" }} |
19 |
H (24 Hours Format) |
{{sampledate | date:"H" }} |
19 |
hh (12 Hours Format) |
{{sampledate | date:"hh" }} |
07 |
h (12 Hours Format) |
{{sampledate | date:"h" }} |
7 |
mm (Minute) |
{{sampledate | date:"mm" }} |
16 |
m (Minute) |
{{sampledate | date:"m" }} |
16 |
sss (Milli Seconds) |
{{sampledate | date:"sss" }} |
501 |
ss (Seconds) |
{{sampledate | date:"ss" }} |
45 |
s (Seconds) |
{{sampledate | date:"s" }} |
45 |
a (AM/PM) |
{{sampledate | date:"a" }} |
PM |
Z (TimeZone) |
{{sampledate | date:"Z" }} |
0530 |
ww (Week of year) |
{{sampledate | date:"ww" }} |
09 |
w (Week of year) |
{{sampledate | date:"w" }} |
9 |
medium |
{{sampledate | date:"medium" }} |
Feb 28, 2016 7:32:55 PM |
short |
{{sampledate | date:"short" }} |
2/28/16 7:33 PM |
fullDate |
{{sampledate | date:"fullDate" }} |
Sunday, February 28, 2016 |
longDate |
{{sampledate | date:"longDate" }} |
February 28, 2016 |
mediumDate |
{{sampledate | date:"mediumDate" }} |
Feb 28, 2016 |
shortDate |
{{sampledate | date:"shortDate" }} |
2/28/16 |
mediumTime |
{{sampledate | date:"mediumTime" }} |
7:37:34 PM |
shortTime |
{{sampledate | date:"shortTime" }} |
7:37 PM |
We will see simple example of using date filter in angularjs.
Following is the example of using date filter in angularjs application.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs Date filter Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("AngulardateApp", []);
app.controller("datectrl", function ($scope) {
$scope.sampledate = new Date();
});
</script>
</head>
<body ng-app="AngulardateApp">
<div ng-controller="datectrl">
Enter Number: <input type="text" ng-model="sampledate" style="width:400px" /><br /><br />
Date with short expression:{{sampledate | date:"short" }}<br /><br />
Date with mediumDate expression: {{sampledate | date : "mediumDate"}} <br /><br />
Date with yyyy-mm-dd hh:mm:ss expression: {{sampledate | date : "yyyy-mm-dd hh:mm:ss" : 0}} <br /><br />
Date with yyyy-mm-dd hh:mm:ss expression: {{sampledate | date : "dd/mm/yyyy 'at' hh:mma" : 0}}
</div>
</body>
</html>
If we run above example we will get output like as shown below.
Following is the result of date filter example in angularjs.
This is how we can use date filter with different type of required date formats in angularjs application.