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 AspxButton的客户端操作
Jun 26 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
ReactRouter的实现方法
Jan 25 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和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
php 定义404页面的实现代码
2012/11/19 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
javascript 二进制运算技巧解析
2012/11/27 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
材料物理专业个人求职信
2013/12/15 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
个人业务学习心得体会
2016/01/25 职场文书
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS