angularJS时间格式化过滤器详解

一.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

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过滤器实现动态搜索与排序功能

以上就是angularJS时间格式化过滤器详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2784592.html

(0)
上一篇 2025年3月8日 17:08:26
下一篇 2025年3月8日 17:08:32

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • clipboard.js基本使用方法分享

    clipboard.js 是一个不需要flash,将文本复制到剪贴板的插件。本文主要和大家介绍clipboard.js基本使用方法,希望能帮助到大家。 1 引入插件 登录后复制 2基本使用 首先需要您需要通过传递DOM选择器,HTML元素或…

    编程技术 2025年3月8日
    200
  • 如何去掉html标签的js

    本文主要和大家分享如何去掉html标签的js方法分享,希望能帮助大家学会如何去除html标签的js。 function delHtmlTag(str){return str.replace(/]+>/g,””);//去掉所有的html…

    编程技术 2025年3月8日
    200
  • AngularJS表达式实例分享

    本文主要和大家分享angularjs表达式实例,希望能帮助到大家。 nbsp;html>AngularJS 表达式 <!– –><!–ng-app="" 是angularJS的“所有者” *…

    编程技术 2025年3月8日
    200
  • 讲述Canvas结合JavaScript实现图片特效

    我们都知道canvas是html5中的,canvas可以做出很多特效等神奇的东西,而javascript当然也可以,但是canvas结合javascript来实现图片特效你玩过嘛,没有的话那么我们一起来看看吧! 首先看一下源图和转换成粒子效…

    2025年3月8日
    200
  • js实现input输入框点击变大缩小

    本文主要和大家分享js实现input输入框点击变大缩小的实例代码,希望能帮助到大家。 一、input输入框点击变大缩小的js代码 html中 input[type='text'] {width: 100px;height…

    编程技术 2025年3月8日
    200
  • js中的正则表达式大全

    这次给大家带来js中的正则表达式大全,在js中使用正则表达式的注意事项有哪些,下面就是实战案例,一起来看一下。 1、什么是正则? 正则也叫做规则,让计算机能够读懂人类的规则(正则都是操作字符串的) 2、什么是正则表达式? 正则表达式是由一个…

    编程技术 2025年3月8日
    200
  • js正则表达式的10个应用实例

    js中正则表达式的10个应用实例 1、找重复项最多的字符和个数 [html] view plain copy var str = 'sassdfdfffdasdffffffsdsdddsss'; var arr = st…

    编程技术 2025年3月8日
    200
  • js关于BOM操作的知识整理

    这次给大家带来js关于bom操作的知识整理,js中的bom操作注意事项有哪些,下面就是实战案例,一起来看一下。 一、什么是BOM? BOM:Browser Object Model 是浏览器对象模型,浏览器对象模型提供了独立与内容的、可以与…

    2025年3月8日
    200
  • Vue.js的2.0后台系统实战案例

    这次给大家带来vue.js的2.0后台系统实战案例,vue.js2.0后台系统实战的注意事项有哪些,下面就是实战案例,一起来看一下。 朋友最近要做个自己用的OA来练练手(PS,那逼一直想创业),找我和他一起做,由于最近时间有限,就帮他写个框…

    编程技术 2025年3月8日
    200
  • Vuejs webp支持图片的插件开发

    这次给大家带来vuejs webp支持图片的插件开发,vuejs webp插件开发的注意事项有哪些,下面就是实战案例,一起来看一下。 本人已经使用vue.js半年多了,在做一些Html5页面的时候发现很多页面都是图片组成的,如果能有效的压缩…

    2025年3月8日
    200

发表回复

登录后才能评论