AngularJS Tutorial - Date Filter Introduction








We can format a date value with date filter for a certain format style.

The date formatter has several built-in options.

If no date format is passed, it defaults to mediumDate.

Format

Here are the built-in localizable formats:

{{  today | date:'medium' }}      <!-- Aug  09, 2014   09:09:02 PM  -->
{{  today | date:'short' }}       <!--  8/9/13  09:09 PM  -->
{{  today | date:'fullDate' }}    <!--  Thursday, August 09,  2014   -->
{{  today | date:'longDate' }}    <!-- August 09, 2014   -->
{{  today | date:'mediumDate' }}  <!-- Aug  09, 2014   -->
{{  today | date:'shortDate' }}   <!-- 8/9/14 -->
{{  today | date:'mediumTime' }}  <!--  09:09:02 PM  -->
{{  today | date:'shortTime' }}   <!--  09:09 PM  -->




Year Formatting

Four-digit year:         {{  today | date:'yyyy' }}  <!-- 2014   -->
Two-digit padded year:   {{  today | date:'yy' }}    <!-- 14  -->
One-digit year:          {{  today | date:'y' }}     <!-- 2014   -->

Month Formatting

Month in year:        {{  today | date:'MMMM'   }}  <!-- August -->
Short month in year:  {{  today | date:'MMM' }}     <!-- Aug  -->
Padded month in year: {{  today | date:'MM' }}      <!-- 08  -->
Month in year:        {{  today | date:'M' }}       <!-- 8  -->





Day Formatting

Padded day in month: {{  today | date:'dd' }}   <!-- 09  -->
Day in month:        {{  today | date:'d' }}    <!-- 9  -->
Day in week:         {{  today | date:'EEEE' }} <!--  Thursday -->
Short day in week:   {{  today | date:'EEE' }}  <!-- Thu  -->

Hour Formatting

Padded hour in  day:     {{  today | date:'HH' }}  <!-- 00  -->
Hour  in day:            {{  today | date:'H' }}  <!-- 0  -->
Padded hour in  am/pm:   {{  today | date:'hh' }}  <!-- 12  -->
Hour  in am/pm:          {{  today | date:'h' }}  <!-- 12  -->

Minute Formatting

Padded minute in  hour:  {{  today | date:'mm' }}  <!-- 09  -->
Minute in  hour:         {{  today | date:'m' }}   <!-- 9  -->

Second Formatting

Padded second in  minute:       {{  today | date:'ss' }}    <!-- 02  -->
Second in  minute:              {{  today | date:'s' }}     <!-- 2  -->
Padded millisecond  in  second: {{  today | date:'.sss' }}  <!-- .999 -->

String Formatting

am/pm  character:          {{  today | date:'a' }}  <!-- AM  -->
4-digit  time zone offset: {{  today | date:'Z' }}  <!-- -0700  -->

Custom date formatting

{{  today | date:'MMM  d, y' }}    <!-- Aug  9, 2014   -->
{{  today | date:'EEEE, d, M'  }}  <!-- Thursday, 9, 8  -->
{{  today | date:'hh:mm:ss.sss' }} <!--  09:09:02.999 -->