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 Date自定义函数 延迟脚本执行
Mar 10 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
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的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
Python生成器(Generator)详解
2015/04/13 Python
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
介绍Java的内部类
2012/10/27 面试题
什么是设计模式
2012/06/17 面试题
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
采购经理岗位职责
2014/02/16 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书