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 相关文章推荐
javascript CSS画图之基础篇
Jul 29 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
vue 实现把路由单独分离出来
Aug 13 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
php 无限分类的树类代码
2009/12/03 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
python求斐波那契数列示例分享
2014/02/14 Python
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
美国第一香水网站:Perfume.com
2017/01/23 全球购物
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
百度JavaScript笔试题
2015/01/15 面试题
环境科学毕业生自荐信
2013/11/21 职场文书
预备党员的自我评价
2014/03/12 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
节水口号标语
2014/06/19 职场文书
个人授权委托书范文
2014/09/21 职场文书
党员转正申请报告
2015/05/15 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
git stash(储藏)的用法总结
2022/06/25 Servers