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实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
微信小程序实现拍照和相册选取图片
May 09 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+mysql分页代码详解
2008/03/27 PHP
PHP 一个页面执行时间类代码
2010/03/05 PHP
destoon之一键登录设置
2014/06/21 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
Python遍历目录中的所有文件的方法
2016/07/08 Python
python绘制条形图方法代码详解
2017/12/19 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
python实现简易通讯录修改版
2018/03/13 Python
numpy中矩阵合并的实例
2018/06/15 Python
python使用KNN算法识别手写数字
2019/04/25 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
综合测评自我评价
2015/03/06 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
图文详解Nginx版本平滑升级方案
2021/09/15 Servers