AngularJS Date Filter with Example

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.

AngularJS Date Filter

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.

AngularJS Date Filter Syntax

Generally the syntax of date filter in angularjs will be like as shown following

 

{{dateexpression | date : format}}

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.

 

FormatExpressionResult

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.

AngularJS Date Filter Example

Following is the example of using date filter in angularjs application.

 

Live Preview

<!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.

Output of AngularJS Date Filter Example

Following is the result of date filter example in angularjs.

 

Angularjs Date Filter Example Output or Result

 This is how we can use date filter with different type of required date formats in angularjs application.