AngularJS日期格式化常见操作实例分析
本文实例讲述了AngularJS日期格式化常见操作。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title>www.jb51.net 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>
运行结果：
PS：这里再为大家推荐几款时间及日期相关工具供大家参考使用：
Unix时间戳(timestamp)转换工具：
http://tools.jb51.net/code/unixtime
在线日期/天数计算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi
在线日期计算器/相差天数计算器：
http://tools.jb51.net/jisuanqi/datecalc
在线日期天数差计算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关推荐
-
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比如格式化时间/日期的VIEW视图代码: <div ng-app> <p> <label>Select a date</label> <input type="date" id="date" ng-model=&quo
-
angularjs实现时间轴效果的示例代码
一 引入包 引入angular-timeline包. 下载地址:angular-timeline.zip 在index.html中引入 <link href="lib/angular-timeline/dist/angular-timeline.css" rel="external nofollow" rel="stylesheet"> <script src="lib/angular-timeline/dist/an
-
AngularJS 日期格式化详解
AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. AngularJS的日期格式化有两种形式,一种是在HTML页面,一种是在JS代码里,都是用到AngularJS的过滤器$filter. HTML: date_expression 即 你在$scope中设的date类型变量(注意,一定是date object才正确), 也是要显
-
Angularjs中使用layDate日期控件示例
layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/bootstrap/)里的.后来因为各种原因,要换掉UI bootstrap中的日期控件,改用layDate日期控件. 解决思路:将layDate的初始化及相关代码定义在指令里. 问题关键点:layDate操作的是Html元素的,怎么实现双向绑定,同步Angularjs模板值和Html的元素值. 指
-
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大部分都用的jQuery,而Angular正好是和jQuery的思维是相反的,开发过程中遇到了不少坑.而Angular团队也放弃了1.x开始开发和React神似的2.0版本,唉,真是沧海桑田啊. 01.Angular vs jQuery Angular模块化和解耦的思路确实值得一学,但是相对于成熟的jQuery插件库,Ang
-
angularjs封装bootstrap时间插件datetimepicker
背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经很成熟的jquery UI 库和大量jquery 插件,几乎是一个取之不尽用之不竭的宝库.然而,它是否能与angularjs结合呢? 很多angularjs原教旨主义者对此持否定态度.他们认为,既然已经使用了angularjs做web应用框架,那就必须避免其他类库的干扰,做纯净的MvvM模式应用.任
-
Angularjs验证用户输入的字符串是否为日期时间
在angularjs中,想在文本框中,验证用户输入的字符串是否为日期时间. 刚开始时,Insus.NET想到的是正则,这只是验证到日期与时间的格式是否正确而已,而对于2月最后一天或是30或是31号,还是无能为力. 因此,Insus.NET想使用angularjs的自定义指令来验证解决此问题. 在ASP.NET MVC的项目中,创建一个控制器,并创建一个Action: 控制器源代码: using System; using System.Collections.Generic; using Sys
-
基于datepicker定义自己的angular时间组件的示例
基于datepicker定义自己的angular时间组件,分享给大家. 首先是引入相应的文件jquery和datepicker,如下 "styles": [ "styles.less", "./assets/lib/datetimepicker/datetimepicker.css" ], "scripts": [ "assets/lib/jquery/jquery.min.js", "./ass
-
Angular4.0中引入laydate.js日期插件的方法教程
前言 laydate.js经过贤心大大的重写之后功能越来越强大,用起来也愈渐灵活了,大家都知道.Angular是不支持直接引入js文件的,下面介绍项目如果引入laydate.js的方法(可同样用于其他js文件引入,可能会有一些差别) 方法如下: 一.将下载的laydate中的js和theme文件放到一个统一的文件下面,我把它放到asset下 二.在angular-cli.json配置js 三.修改laydate.js 找到这一句补全路径和删除版本号 "modules/laydate/"
-
bootstrap timepicker在angular中取值并转化为时间戳
上一篇我们讲到angular对于timepicker的一个封装后的插件,但是由于angular的版本必须是v1.2.30以上的.对于有些大型系统,一时升级angular的版本实在耗费时间.那么可以用这种方法来取值. 页面上的时间格式是这样的: 文件引入 '/bootstrap-datetimepicker.min.css', '/bootstrap-datetimepicker.min.js', '/bootstrap-datetimepicker.zh-CN.js',//中文包 html <d