How to format JS date object in AngularJS using date filter.

AngularJs provides its own “date” filter to modify Javascript date object to a given format.

Following are defined format strings, which can be used to format JS date object.

Value Description
format Optional. The date format to display the date in, which can be one or more of the following:
"yyyy" year (2016)
"yy" year (16)
"y" year (2016)
"MMMM" month (January)
"MMM" month (Jan)
"MM" month (01)
"M" month (1)
"dd" day (06)
"d" day (6)
"EEEE" day (Tuesday)
"EEE" day (Tue)
"HH" hour, 00-23 (09)
"H" hour 0-23 (9)
"hh" hour in AM/PM, 00-12 (09)
"h" hour in AM/PM, 0-12 (9)
"mm" minute (05)
"m" minute (5)
"ss" second (05)
"s" second (5)
"sss" millisecond (035)
"a" (AM/PM)
"Z" timezone (from -1200 to +1200)
"ww" week (00-53)
"w" week (0-53)
"G" era (AD)
"GG" era (AD)
"GGG" era (AD)
"GGGG" era (Anno Domini)The format value can also be one of the following predefined formats:
"short" same as "M/d/yy h:mm a" (1/5/16 9:05 AM)
"medium" same as "MMM d, y h:mm:ss a" (Jan 5, 2016 9:05:05 AM)
"shortDate" same as "M/d/yy" (1/5/16)
"mediumDate" same as "MMM d, y" (Jan 5, 2016)
"longDate" same as "MMMM d, y" (January 5, 2016)
"fullDate" same as "EEEE, MMMM d, y" (Tuesday, January 5, 2016)
"shortTime" same as "h:mm a" (9:05 AM)
"mediumTime" same as "h:mm:ss a" (9:05:05 AM)
timezone Optional. The timezone used to format the date.

You can also check Angularjs documentation of “date” filter here.

Let’s have a look at the implementation of “date” filter:

How to use “date” filter directly in HTML during data binding and getting formatted string form controller.


In HTML we can use filter format and get a formatted date as follow:

$ = new Date();
//Will pring full date i.e 15.09.2017
<p>Date = {{ today | date : "dd.MM.y" }}</p>

today is having date object we are getting from the controller.

How to format date object in the controller using $filter service.
$scope.formatedDate = $filter("date")(new Date(), "dd MMMM yy");
<p>Date = {{ formatedDate }}</p>

Following code shows, How to get a day of the week using “date” filter in AngularJS.

$scope.weekDay = $filter("date")(new Date(), "EEEE");
//will print full day i.e Friday.
<p>Date = {{ weekDay }}</p>

You can demo page and get required format as you type in format.

Leave a Reply

Your email address will not be published. Required fields are marked *