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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
spring+angular实现导出excel的实现代码
Feb 27 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 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
如何选购合适的收音机
2021/03/01 无线电
实例详解PHP中html word 互转的方法
2016/01/28 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
基于jquery的15款幻灯片插件
2011/04/10 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
理解Python中的绝对路径和相对路径
2017/08/30 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
十周年庆典策划方案
2014/06/03 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
团支部书记竞选稿
2015/11/21 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书