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 06 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
动态加载js文件简单示例
Apr 21 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 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
B2K与车机的中波PK
2021/03/02 无线电
德生1994机评
2021/03/02 无线电
php生成随机数或者字符串的代码
2008/09/05 PHP
PHP循环结构实例讲解
2014/02/10 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
PHP实现微信对账单处理
2018/10/01 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
python每隔N秒运行指定函数的方法
2015/03/16 Python
Python分治法定义与应用实例详解
2017/07/28 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
新娘父亲婚礼致辞
2014/01/16 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python