AngularJS日期格式化常见操作实例分析


Posted in Javascript onMay 17, 2018

本文实例讲述了AngularJS日期格式化常见操作。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <title>3water.com AngularJS日期格式化</title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  <style>
    .c1 {
      color: red;
    }
  </style>
</head>
<body ng-controller="myCtrl">
<!--格式 : 年-月-日 星期 时:分:秒.毫秒 -->
<div>{{time| date:'yyyy-MM-dd EEE HH:mm:ss.sss'}}</div>
<!--2017-01-06 Fri 20:41:58.000-->
<div>{{time| date:'yyyy-MM-dd EEEE hh:mm:ss.sss'}}</div>
<!--2017-01-06 Friday 08:41:58.000-->
<!--EEE:简写英文星期-->
<!--EEEE:英文星期-->
<!--HH:24小时制-->
<!--hh:12小时制-->
<div class="c1">本地化日期格式化:</div>
<div>{{time| date:'medium'}}</div>
<!--Mar 8, 2017 9:26:08 AM-->
<div>{{time| date:'short'}}</div>
<!--3/8/17 9:26 AM-->
<div>{{time| date:'fullDate'}}</div>
<!--Wednesday, March 8, 2017-->
<div>{{time| date:'longDate'}}</div>
<!--March 8, 2017-->
<div>{{time| date:'mediumDate'}}</div>
<!--Mar 8, 2017-->
<div>{{time| date:'shortDate'}}</div>
<!--3/8/17-->
<div>{{time| date:'mediumTime'}}</div>
<!--9:26:08 AM-->
<div>{{time| date:'shortTime'}}</div>
<!--9:26 AM-->
<div class="c1">年份格式化::</div>
<div>{{time| date:'yyyy'}}</div>
<!--四位年份:2017-->
<div>{{time| date:'yy'}}</div>
<!--二位年份:17-->
<div>{{time| date:'y'}}</div>
<!--一位年份:2017-->
<div class="c1">月份格式化:</div>
<div>{{time| date:'MMMM'}}</div>
<!--英文月份:March-->
<div>{{time| date:'MMM'}}</div>
<!--英文月份简写:Mar-->
<div>{{time| date:'MM'}}</div>
<!--两位数字月份:03-->
<div>{{time| date:'M'}}</div>
<!--1年中的第几个月份:3-->
<div class="c1">日期格式化:</div>
<div>{{time| date:'dd'}}</div>
<!--数字日期:08-->
<div>{{time| date:'d'}}</div>
<!--1个月中的第几天:8-->
<div class="c1">星期格式化:</div>
<div>{{time| date:'EEEE'}}</div>
<!--英文星期:Wednesday-->
<div>{{time| date:'EEE'}}</div>
<!--英文星期简写:Wed-->
<div class="c1">小时格式化:</div>
<div>{{time| date:'HH'}}</div>
<!--24小时制数字小时:19-->
<div>{{time| date:'H'}}</div>
<!--1天中的第几个小时:19-->
<div>{{time| date:'hh'}}</div>
<!--12小时制数字小时:07-->
<div>{{time| date:'h'}}</div>
<!--上午或下午的第几个小时:7-->
<div class="c1">分钟格式化:</div>
<div>{{time| date:'m'}}</div>
<!--数字分钟数:26-->
<div>{{time| date:'mm'}}</div>
<!--1个小时中的第几分钟:26-->
<div class="c1">秒格式化:</div>
<div>{{time| date:'ss'}}</div>
<!--数字秒数:08-->
<div>{{time| date:'s'}}</div>
<!--1分钟中内的第几秒:8-->
<div class="c1">毫秒格式化:</div>
<div>{{time| date:'sss'}}</div>
<!--毫秒数:301-->
<div class="c1">字符格式化:</div>
<div>{{time| date:'a'}}</div>
<div>{{time| date:'Z'}}</div>
<!--上下午标识:AM-->
<!--四位时区标识:+0800-->
<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function ($scope) {
//    $scope.time = new Date();
    $scope.time = 1483706518000;
  });
</script>
</body>
</html>

运行结果:

AngularJS日期格式化常见操作实例分析

Javascript 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
JavaScript—window对象使用示例
Dec 09 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
Node 升级到最新稳定版的方法分享
May 17 #Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 #Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 #Javascript
JS 实现分页打印功能
May 16 #Javascript
使用vue-cli导入Element UI组件的方法
May 16 #Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 #Javascript
Koa2微信公众号开发之消息管理
May 16 #Javascript
You might like
php 在文件指定行插入数据的代码
2010/05/08 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
jquery replace方法去空格
2017/05/08 jQuery
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
python 获取文件列表(或是目录例表)
2009/03/25 Python
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
主要的Ajax框架都有什么
2013/11/14 面试题
迟到检讨书900字
2014/01/14 职场文书
欢迎横幅标语
2014/06/17 职场文书
新生儿未入户证明
2015/06/23 职场文书
Python字典的基础操作
2021/11/01 Python
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫
Python序列化模块JSON与Pickle
2022/06/05 Python