0

0

angularJS时间格式化过滤器详解

小云云

小云云

发布时间:2018-03-07 15:39:25

|

1846人浏览过

|

来源于php中文网

原创

一.date过滤器的功能是基于要求的格式格式化一个日期成为一个字符串。

格式化字符串的基本参数:本文主要和大家分享angularJS时间格式化过滤器详解,希望能帮助到大家。

‘yyyy’: 用4位数字表示年(例如:AD 1 => 0001, AD 2010 => 2010)

‘yy’: 用两位数字表示年(00-99)(例如:AD 2001 => 01, AD 2010 => 10)

‘y’: 用一位数字代表年(例如:AD 1 => 1, AD 199 => 199)

‘MMMM’: 英文全称表示月(January-December)

‘MMM’: 英文缩写表示月(Jan-Dec)

‘MM’: 两位数字表示月(01-12)

‘M’: 月(1-12)

‘dd’: 两位数字表示日(01-31)

‘d’: 日(1-31)

‘EEEE’: 英文全称的一周中的天(Sunday-Saturday)

‘EEE’: 英文缩写的一周中的天(Sun-Sat)

‘HH’: 两位数表示24小时制的时(00-23)

‘H’: 24小时制的时(0-23)

‘hh’: 两位数字表示上午或下午的时(01-12)

‘h’: 上午或下午的时(1-12)

‘mm’: 两位数字表示分(00-59)

‘m’: 分(0-59)

‘ss’: 两位数字表示秒(00-59)

‘s’: 秒(0-59)

‘sss’: 毫秒(000-999)

‘a’: AM/PM

‘Z’: 4位数字(+符号)代表时区偏移量(-1200——+1200)

‘ww’: 用两位数字表示一年的周数(00-53),第一周(01)是一年中的第一个星期四

‘w’:  一年的周数(0-53),第一周(1)是一年中的第一个星期四

‘G’,’GG’,‘GGG’: 年代字符串的缩写形式,例如‘AD’(公元)

‘GGGG’: 年代字符串的全称,例如‘Anno Domini’(公元)

上面这些参数我们可以根据自己的意愿自由组合得到自己想要的格式,例如'yyyy-MM-dd'等。

格式化字符串也提供了一些预定义的本地化格式,可以方便我们使用:

medium:‘MMM d,y h:mm:ss a’ 例如:Sep 3, 2010 12:05:08 PM

short:‘M/d/yy h:mm a’ 例如: 9/3/10 12:05 PM

Dora
Dora

创建令人惊叹的3D动画网站,无需编写一行代码。

下载

fullDate: ’EEEE,MMMM d,y’ 例如:Friday, September 3, 2010

longDate: ‘MMMM d,y’ 例如:September 3, 2010

mediumDate: ’MMM d,y’ 例如: Sep 3, 2010

shortDate: ’M/d/y’ 例如: 9/3/10

mediumTime: ’h:mm:ss a’ 例如:12:05:08 PM

shortTime: ’h:mm a’  例如:12:05 PM

格式化字符串可以包含文本值。这些需要被单引号包围(例如 “h ‘in the morning’”),如果想输出一对单引号,就在一个序列中用两个双引号(例如:“h ‘o’’clock’”)

date过滤器的用法:

1.在html中用法:{{ date_expression | date : format : timezone}}

实例:

{{1288323623006 | date:'medium'}}
{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}
{{'1288323623006' | date:'MM/dd/yyyy @ h:mma'}}
{{'1288323623006' | date:"MM/dd/yyyy 'at' h:mma"}}

输出结果为:

 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.在javascript中的用法:$filter('date')(date, format, timezone)

实例:

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

输出结果为:

2015-01-28

二、

angularJS的date过滤器可以将日期格式化成需要的格式。

常用方式: 
   {{now | date : 'yyyy-MM-dd HH:mm:ss'}}

如果没有指定格式,angularJS会采用默认格式mediumDate

{{data | date}}
{{data | date : mediumDate}}

下面是angularJS内置的日期格式化

{{ now | date:'medium' }}
{{ now | date:'short' }}
{{ now | date:'fullDate' }}
{{ now | date:'longDate' }}
{{ now | date:'mediumDate' }}
{{ now | date:'shortDate' }}
{{ now | date:'mediumTime' }}
{{ now | date:'shortTime' }}

年份格式化
四位年份: {{ now | date:'yyyy' }}
两位年份: {{ now | date:'yy' }}
一位年份: {{ now | date:'y' }}

月份格式化
英文月份: {{ now | date:'MMMM' }}
英文月份简写: {{ now | date:'MMM' }}
数字月份: {{ now |date:'MM' }}
一年中的第几个月份: {{ now |date:'M' }}

日期格式化
数字日期: {{ now | date:'dd' }}
一个月中的第几天: {{ now | date:'d' }}
英文星期: {{ now | date:'EEEE' }}
英文星期简写: {{ now | date:'EEE' }}

小时格式化
24小时制数字小时: {{now | date:'HH'}}
一天中的第几个小时: {{now | date:'H'}}
12小时制数字小时: {{now | date:'hh'}}
上午或下午的第几个小时: {{now | date:'h'}}
分钟格式化
数字分钟数: {{ now | date:'mm' }}
一个小时中的第几分钟: {{ now | date:'m' }}
秒数格式化
数字秒数: {{ now | date:'ss' }}
一分钟内的第几秒: {{ now | date:'s' }}
毫秒数: {{ now | date:'.sss' }}
字符格式化
上下午标识: {{ now | date:'a' }}
四位时区标识: {{ now | date:'Z' }}
自定义格式
{{ now | date:'MMMd, y' }}
{{ now | date:'EEEE, d, M' }}
{{ now | date:'hh:mm:ss.sss' }}

相关推荐:

Angularjs过滤器完成排序功能实例详解

Angular js过滤器的详细介绍

详解Angularjs过滤器实现动态搜索与排序功能

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

61

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

31

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

72

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

20

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

21

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

7

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

4

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

49

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

11

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.2万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号