AngularJS Date Filter with Example

  Total Views : 885
  Comments : 0
 
  Keywords : Date filter in angularjs example, Use date filter in angularjs to format date, Angularjs format date time using date filter example, Angularjs date filter function example to format date

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 required format. In angularjs we can convert date to multiple formats using date filter.

Syntax of Date Filter in AngularJS

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.

Example of Date Filter in AngularJS

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 Date Filter Example in AngularJS

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.

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User