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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 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 日期加减的类,很不错
2009/10/10 PHP
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
python判断字符串或者集合是否为空的实例
2019/01/23 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
怎么样写好简历中的自我评价
2013/10/25 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
环保建议书100字
2014/05/14 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
房屋维修协议书范本
2014/09/25 职场文书
个人委托书范本汇总
2014/10/01 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript