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 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
学习jQuey中的return false
Dec 18 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
AngularJS Controller作用域
Jan 09 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 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
什么是MVC,好东西啊
2007/05/03 PHP
php+mysql事务rollback&amp;commit示例
2010/02/08 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
Js基础学习资料
2010/11/23 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
python 排序算法总结及实例详解
2016/09/28 Python
解读! Python在人工智能中的作用
2017/11/14 Python
python安装本地whl的实例步骤
2019/10/12 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
公司道歉信范文
2014/01/09 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
2014年教师节活动总结
2014/08/29 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
摩登时代观后感
2015/06/03 职场文书
安全守法证明
2015/06/23 职场文书
反邪教教育心得体会
2016/01/15 职场文书
小学思品教学反思
2016/02/20 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python