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 相关文章推荐
用js生产批量批处理执行命令
Jul 28 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
jquery实现图片预加载
Dec 25 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
Vue通过provide inject实现组件通信
Sep 03 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 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
python端口扫描系统实现方法
2014/11/19 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
体育老师的教学自我评价分享
2013/11/19 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
元旦晚会开场白
2015/05/29 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
python模板入门教程之flask Jinja
2022/04/11 Python