Search within TutorialsPark

AngularJS Filters: Single Data Values


Learn how to use AngularJS Filters for filtering Single Data Values.


AngularJS Filters : Filtering Dates

The AngularJS built-in filter date is used to format dates.The filter is set by using colon followed by the filter date, followed by a formatting string which comprises of date components you want in the view.

Table : AngularJS Filter Date Filter Parameters

Parameter Description
yyyy To create a Four-digit representation of the year. eg: AD 16 is displayed as 2016
yy A Two-digit representation of the year, eg : AD 2016 is displayed as 16
y To display a single digit representation of the year, eg : AD 2016 is displayed as 2016
MMMM To show the month in a year Eg :(January-December)
MMM To show the Month in a year in a short representation Eg: (Jan-Dec)
MM To show the month in a year in numeric format, padded to two characters(eg:01-12)
M To show the month in a year in numeric form, without any padding(eg: 1-12)
dd To show the Day of month, padded to two character eg: 01-31
d To show the day of month, without any padding. eg: 1-31
EEEE To show the full name of day of week, eg eg: Sunday-Saturday
EEE To show the short name of day of week. eg : Sun-Sat
HH To show the hours in a day, 24-hour format with padding to two characters eg: 00-23
H To show the hour in a day, 24 hour format without padding, eg 0-23
hh To show the hour in a day, 12 hour format(AM/PM) with padding to two characters, eg 01-12.
h To show the hour in a day, 12 hour format(AM/PM) without padding, eg 1-12.
mm To show the Minute in hour, padded to two characters, eg 00-59
m To show the Minute in hour without padding, eg 0-59
ss To show the second in minute, padded to two characters, eg : 00-59
s To show the second in minute format, without any padding. eg 0-59 .
.sss or ,sss To show millisecond in second, padded to three characters. Eg 000-999
a To show a marker for am/pm.
Z To represent the time-zone offset in four characters, eg -1200 - +1200
ww To represnt the week of the year in ISO 8601 standard, padded to two characters , eg (00-53)
w To represnt the week of the year in ISO 8601 standard, without padding , eg (0-53)

In the demo, the filter date is used in the format dd MMMM yyyy, the behaviour getExamDate is used to return the exam date in the future.


Example: AngularJS Filters Filtering Dates

Give it a TRY! » Note: The future exam date is calculated by adding no of days specified in the data.


AngularJS Filters : Date Filter using Strings

The AngularJS also provides a set of predefined built-in date filters in form of string, these filter produce results which can also be achieved using filters using Characters.

Table : AngularJS Filter Date Filter using Strings

Parameter Description
medium Same Effect as MMM d, y h:mm:ss a
short Same Effect as M/d/yy h:mm a
fullDate Same Effect as EEEE, MMMM d,y .
longDate Same Effect as MMMM, d, y
mediumDate Same Effect as MMM d, y
shortDate Same Effect as M/d/yy
mediumTime Same Effect as h:mm:ss a
shortTime Same Effect as h:mm a

Example: AngularJS Filters Localized Filter Output

Give it a TRY! » Note: The fullDate format creates a date format equivalent to EEEE, MMMM d,y