AngularJS > Filters

Date formatting in AngularJS

How to format date in AngularJS?

To format date and time in AngularJS,, we use date filter.

    var app = angular.module("app", []);
    app.controller("DateController", ["$scope", function ($scope) {
        $scope.ThisDate = new Date();
<div ng-app="app" ng-controller="DateController">
        <table class="table">
                <th>Demo Date time</th>
                <th colspan="2">{{ThisDate}}</th>
                <td>yyyy: </td>
                <td>{{ ThisDate | date: 'yyyy'}} </td>
                <td>4 digit year</td>

In the above code snippet, we have created a DateController and ThisDate as $scope property that will be used to format the date and time for this demonstration.

Notice the highlighted filter code in the above code snippet, the 'yyyy' is the format parameter value and that is giving the 4  digits year portion of the Date and time data.


Date time format in AngularJS

Similarly, change the format parameter value below and we can get desired result as shown below.

Demo Date time"2015-05-27T15:28:17.210Z"
Format parameter value Output Description
yyyy: 2015 4 digit year
yy: 15 2 digit year
MMMM: May Full month name
MM: 05 Short month name
M: 5 Month number
dd: 27 Day of month two digit
d: 27 Day of month
EEEE: Wednesday Full day name
EEE: Wed Short day name
HH: 20 Hour in day (24 hour format)
hh: 08 AM / PM (12 hour format)
mm: 58 Minute in two digit
m: 58 Minutes
ss: 17 Seconds (2 digit)
s: 17 Seconds
sss: 210 Milli Seconds
medium: May 27, 2015 8:58:17 PM 'MMM d, y h:mm:ss a
short: 5/27/15 8:58 PM M/d/yy h:mm a
fullDate: Wednesday, May 27, 2015 EEEE, MMMM d, y
longDate: May 27, 2015 MMMM d, y
mediumDate: May 27, 2015 MMM d, y
shortDate: 5/27/15 M/d/yy
mediumTime: 8:58:17 PM h:mm:ss a
shortTime: 8:58 PM h:mm a
 Views: 2818 | Post Order: 29

Write for us