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: b6f4550932131e3fb738d6351cf5327b
{{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' }} 21f8b90508180e8fb6c080fc31eb23a9
Two-digit year: {{ now | date:'yy' }} 9f17d377fe04aa74df64169b3ade4491
One-digit year: {{ now | date:'y' }} 21f8b90508180e8fb6c080fc31eb23a9

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

Date formatting
Numeric date: {{ now | date:'dd' }} 9801ade335e8996c05c79bdcdb82ed99
Day of the month: {{ now | date: 'd' }} e7e62d5f97460753606b5fde4974d6a0
English week: {{ now | date:'EEEE' }} 7736582078d4b632358284ad60e5af10
English week abbreviation: { { now | date:'EEE' }} 9f2647462a40c5863361fde87163e007

Hour formatting
24-hour digital hour: {{now | date:'HH'}} < ;!-- 10 -->
The hour of the day: {{now | date:'H'}} 292f637d1ac700e7fecb86f3cb405aa8
12-hour numerical hour: {{now | date:'hh'}} 9cb30901740ebee1bfd96717de66ab5f
The hour in the morning or afternoon: {{now | date:'h'}} c9589930325425b693dd9bb409763548
Minute formatting
Numeric minutes: {{ now | date:'mm' }} 7a8efe97822350462eeffeef20fe0281
The first minute of the hour: { { now | date:'m' }} 7a8efe97822350462eeffeef20fe0281
Seconds formatting
Numeric seconds: {{ now | date:'ss' }} 278220e7656d1bc229bf0cdc1e0b18e9
The number of seconds in one minute: {{ now | date:'s' }} 278220e7656d1bc229bf0cdc1e0b18e9
The number of milliseconds: {{ now | date:' .sss' }} af28386278419624fd78e3b58bed0fe5
Character formatting
Upper and afternoon identifiers: {{ now | date:'a' }} 72d59f38bdb060b8d3546a2cc6772cd3
Four-digit time zone identifier: {{ now | date:'Z' }} aea2e2bc758129ccc68943f6f77c8a2c
Custom format
{{ now | date:'MMMd, y ' }} 052921f587e50bb63876abe312662bb8
{{ now | date:'EEEE, d, M' }} 50f42f01209326b736a34e0ba8905567
{{ now | date:'hh:mm:ss.sss' }} cd9f541f15df5d0ef8d0e67a6922b774

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!