WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS date Filter


Example

Display the number as a money format:

<div ng-app="myApp" ng-controller="datCtrl">

<p>Date = {{ today | date }}</p>

</div>
Try it yourself »

Definition and Usage

The date channel organizes a date to a predetermined format.

The date can be a date article, milliseconds, or a datetime string like "2016-01-05T09:05:05.035Z"

By default, the arrangement is "MMM d, y" (Jan 5, 2016).


Syntax

{{ date | date : format : timezone }}

Parameter Values

Value Description
format Optional. The date arrangement to show the date in, which can be one or a greater amount 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" period (AD)
"GG" period (AD)
"GGG" time (AD)
"GGGG" time (Anno Domini)

The design esteem can likewise be one of the accompanying 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 design the date.

More Examples

Example

Display a date in a custom format:

<div ng-app="myApp" ng-controller="datCtrl">

<p>Date = {{ today | date :  "dd.MM.y" }}</p>

</div>
Try it yourself »

Example

Display a date utilizing a predefined format:

<div ng-app="myApp" ng-controller="datCtrl">

<p>Date = {{ today | date : "fullDate" }}</p>

</div>
Try it yourself »

Example

Display a date blend of content and a predefined format:

<div ng-app="myApp" ng-controller="datCtrl">

<p>Date = {{ today | date : "fullDate" }}</p>

</div>
Try it yourself »

Example

The date as a datetime string:

<div ng-app="">

<p>Date = {{ "2016-01-05T09:05:05.035Z" | date }}</p>

</div>
Try it yourself »

Related Pages

AngularJS Tutorial: Angular Filters