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 自定义的联动下拉框
Feb 07 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
详解javascript数组去重问题
Nov 06 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
js实现滑动滑块验证登录
Jul 24 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
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 Smarty 字符比较代码
2011/02/27 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
突发奇想的一个jquery插件
2010/11/19 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
vue debug 二种方法
2018/09/16 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
python实现ip地址的包含关系判断
2020/02/07 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
python3 re返回形式总结
2020/11/20 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
咖啡蛋糕店创业计划书
2014/01/28 职场文书
建筑工地宣传标语
2014/06/18 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
2014年社区个人工作总结
2014/12/02 职场文书