Detailed explanation of angularJS time formatting filter

The function of the .date filter is to format a date into a string based on the required format.

Basic parameters of format string: This article mainly shares with you the detailed explanation of angularJS time formatting filter, hoping to help everyone.

'yyyy': Use 4 digits to represent the year (for example: AD 1 => 0001, AD 2010 => 2010)

'yy': Use 2 digits to represent the year ( 00-99) (for example: AD 2001 => 01, AD 2010 => 10)

'y': Use one digit to represent the year (for example: AD 1 => 1, AD 199 = > 199)

'MMMM': The full English name means month (January-December)

'MMM': The English abbreviation means month (Jan-Dec)

'MM ': Two digits represent the month (01-12)

'M': Month (1-12)

'dd': Two digits represent the day (01-31)

'd': day (1-31)

'EEEE': the full English name of the day of the week (Sunday-Saturday)

'EEE': the English abbreviation of the week The day in (Sun-Sat)

'HH': Two digits represent the hour in 24-hour format (00-23)

'H': The hour in 24-hour format (0- 23)

'hh': two digits indicating the hour of the morning or afternoon (01-12)

'h': the hour of the morning or afternoon (1-12)

'mm': Two digits represent minutes (00-59)

'm': Minutes (0-59)

'ss': Two digits represent seconds (00- 59)

's': seconds (0-59)

'sss': milliseconds (000-999)

'a': AM/PM

'Z': 4 digits (+ sign) represent the time zone offset (-1200——+1200)

'ww': use two digits to represent the week number of the year (00- 53), the first week (01) is the first Thursday of the year

'w': The number of weeks of the year (0-53), the first week (1) is the first Thursday of the year First Thursday

'G','GG','GGG': The abbreviation of the era string, such as 'AD' (A.D.)

'GGGG': The abbreviation of the era string Full name, such as 'Anno Domini' (AD)

We can freely combine the above parameters according to our own wishes to get the format we want, such as 'yyyy-MM-dd', etc.

The format string also provides some predefined localized formats, which are convenient for us to use:

medium: 'MMM d,y h:mm:ss a' For example: Sep 3, 2010 12:05:08 PM

short: 'M/d/yy h:mm a' For example: 9/3/10 12:05 PM

fullDate: 'EEEE,MMMM d ,y' For example: Friday, September 3, 2010

longDate: 'MMMM d,y' For example: September 3, 2010

mediumDate: 'MMM d,y' For example: Sep 3, 2010

shortDate: 'M/d/y' For example: 9/3/10

mediumTime: 'h:mm:ss a' For example: 12:05:08 PM

shortTime: 'h:mm a' For example: 12:05 PM

The format string can contain text values. These need to be surrounded by single quotes (for example: "h 'in the morning'"). If you want to output a pair of single quotes, use two double quotes in a sequence (for example: "h 'o''clock'")

Usage of date filter:

1. Usage in html: {{ date_expression | date : format : timezone}}

Example:

<span>{{1288323623006 | date:&#39;medium&#39;}}</span><br>
 <span>{{1288323623006 | date:&#39;yyyy-MM-dd HH:mm:ss Z&#39;}}</span><br>
<span>{{&#39;1288323623006&#39; | date:&#39;MM/dd/yyyy @ h:mma&#39;}}</span><br>
<span>{{&#39;1288323623006&#39; | date:"MM/dd/yyyy &#39;at&#39; h:mma"}}</span><br>

Output The result is:

Oct 29, 2010 11:40:23 AM

2010-10-29 11:40:23 +0800

10/29/2010 @ 11 :40AM

10/29/2010 at 11:40AM

2. Usage in javascript: $filter('date')(date, format, timezone)

Example:

var today = new Date();
$scope.formatDate = $filter('date')(today, 'yyyy-MM-dd');

The output result is:

2015-01-28

2.

angularJS’s date filter can format the date into the required format.

Commonly used methods:
{{now | date : 'yyyy-MM-dd HH:mm:ss'} }

If no format is specified, angularJS will use the default format mediumDate

{{data | date}}<!-- Dec 3, 2016  -->
{{data | date : mediumDate}}<!-- Dec 3, 2016  -->

The following is the built-in date formatting of angularJS

{{ now | date:&#39;medium&#39; }}<!-- Dec 3, 2016 10:43:51 AM -->
{{ now | date:&#39;short&#39; }}<!-- 12/3/16 10:43 AM -->
{{ now | date:&#39;fullDate&#39; }}<!-- Saturday, December 3, 2016 -->
{{ now | date:&#39;longDate&#39; }}<!-- December 3, 2016 -->
{{ now | date:&#39;mediumDate&#39; }}<!-- Dec 3, 2016 -->
{{ now | date:&#39;shortDate&#39; }}<!-- 12/3/16 -->
{{ now | date:&#39;mediumTime&#39; }}<!-- 10:43:51 AM -->
{{ now | date:&#39;shortTime&#39; }}<!-- 10:43 AM -->

Year Format
Four-digit year: {{ now | date:'yyyy' }}
Two-digit year: {{ now | date:'yy' }}
One-digit year: {{ now | date:'y' }}

Month format
English month : {{ now | date:'MMMM' }}
English month abbreviation: {{ now | date:'MMM' }}
Number month: {{ now |date:'MM' }}
Number of months in the year: {{ now |date:'M' }}

Date formatting
Numeric date: {{ now | date:'dd' }}
Day of the month: {{ now | date: 'd' }}
English week: {{ now | date:'EEEE' }}
English week abbreviation: { { now | date:'EEE' }}

Hour formatting
24-hour digital hour: {{now | date:'HH'}} < ;!-- 10 -->
The hour of the day: {{now | date:'H'}}
12-hour numerical hour: {{now | date:'hh'}}
The hour in the morning or afternoon: {{now | date:'h'}}
Minute formatting
Numeric minutes: {{ now | date:'mm' }}
The first minute of the hour: { { now | date:'m' }}
Seconds formatting
Numeric seconds: {{ now | date:'ss' }}
The number of seconds in one minute: {{ now | date:'s' }}
The number of milliseconds: {{ now | date:' .sss' }}
Character formatting
Upper and afternoon identifiers: {{ now | date:'a' }}
Four-digit time zone identifier: {{ now | date:'Z' }}
Custom format
{{ now | date:'MMMd, y ' }}
{{ now | date:'EEEE, d, M' }}
{{ now | date:'hh:mm:ss.sss' }}

Related recommendations:

Angularjs filter completes the sorting function example detailed explanation

Detailed introduction to Angular js filter

Detailed explanation of Angularjs filter realizing dynamic search and sorting Function

The above is the detailed content of Detailed explanation of angularJS time formatting filter. For more information, please follow other related articles on the PHP Chinese website!