angularJS date filter ——时间格式化过滤器

前端之家收集整理的这篇文章主要介绍了angularJS date filter ——时间格式化过滤器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

测试时间对象:”2016-12-03T02:43:51.535Z“

常用方式:

 <!-- 2016-12-03 10:43:51 --> {{now | date : 'yyyy-MM-dd HH:mm:ss'}}
  • 如果没有指定格式,angularJS会采用默认格式mediumDate

    {{data | date}}<!-- Dec 3,2016 --> {{data | date : mediumDate}}<!-- Dec 3,2016 -->
  • 下面是angularJS内置的日期格式化

    {{ now | date:'medium' }}<!-- Dec 3,2016 10:43:51 AM --> {{ now | date:'short' }}<!-- 12/3/16 10:43 AM --> {{ now | date:'fullDate' }}<!-- Saturday,December 3,2016 --> {{ now | date:'longDate' }}<!-- December 3,2016 --> {{ now | date:'mediumDate' }}<!-- Dec 3,2016 --> {{ now | date:'shortDate' }}<!-- 12/3/16 --> {{ now | date:'mediumTime' }}<!-- 10:43:51 AM --> {{ now | date:'shortTime' }}<!-- 10:43 AM -->
  • 年份格式化

    四位年份: {{ now | date:'yyyy' }} <!-- 2016--> 两位年份: {{ now | date:'yy' }} <!-- 16--> 一位年份: {{ now | date:'y' }} <!-- 2016-->
  • 月份格式化

    英文月份: {{ now | date:'MMMM' }} <!-- December --> 英文月份简写: {{ now | date:'MMM' }} <!-- Dec --> 数字月份: {{ now |date:'MM' }} <!-- 12 --> 一年中的第几个月份: {{ now |date:'M' }} <!-- 12 -->
  • 日期格式化

    数字日期: {{ now | date:'dd' }} <!-- 03 --> 一个月中的第几天: {{ now | date:'d' }} <!-- 3 --> 英文星期: {{ now | date:'EEEE' }} <!-- Saturday --> 英文星期简写: {{ now | date:'EEE' }} <!-- Sat -->
  • 小时格式化

    24小时制数字小时: {{now | date:'HH'}} <!-- 10 --> 一天中的第几个小时: {{now | date:'H'}} <!-- 10 --> 12小时制数字小时: {{now | date:'hh'}} <!--10--> 上午或下午的第几个小时: {{now | date:'h'}} <!--10-->
  • 分钟格式化

    数字分钟数: {{ now | date:'mm' }} <!-- 43 --> 一个小时中的第几分钟: {{ now | date:'m' }} <!-- 43 -->
  • 秒数格式化

    数字秒数: {{ now | date:'ss' }} <!-- 51 --> 一分钟内的第几秒: {{ now | date:'s' }} <!-- 51 --> 毫秒数: {{ now | date:'.sss' }} <!-- .535 -->
  • 字符格式化

    上下午标识: {{ now | date:'a' }} <!-- AM --> 四位时区标识: {{ now | date:'Z' }} <!--- +0800 -->
  • 自定义格式

    {{ now | date:'MMMd,y' }} <!-- Dec3,2016 --> {{ now | date:'EEEE,d,M' }} <!-- Saturday,3,12 --> {{ now | date:'hh:mm:ss.sss' }} <!-- 10:43:51.535 -->

本文参考自《angularJS 权威教程》

原文链接:https://www.f2er.com/angularjs/148511.html

猜你在找的Angularjs相关文章