AngularJS 日期格式化详解


Posted in Javascript onDecember 23, 2015

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。

AngularJS的日期格式化有两种形式,一种是在HTML页面,一种是在JS代码里,都是用到AngularJS的过滤器$filter。

HTML: date_expression 即 你在$scope中设的date类型变量(注意,一定是date object才正确), 也是要显示出来的日期,|是分割符号,分割符号后面的第一个参数date是指明过滤器类型是过滤日期的,第二个参数format是你的日期要格式化成什么样子,比如yyyy-MM-dd,最后timezone一个是时区(可选参数),对于国际化的网站比较适用。

{{ date_expression | date : format : timezone}}

两种写法:可以用{{}}表达式,也可以用ng-bind 或者 ng-model

{{myDate | date:'medium'}}

<h1 ng-bind="myDate | date:'yyyy-MM-dd'"></h1>

在Javascript代码里,是这么写的:

var myJsDate=$filter('date')($scope.myDate,'yyyy-MM-dd');

这样你声明的变量myJsDate就能得到$scope里myDate格式化之后的值了。

以上内容是小编给大家分享的AngularJS 日期格式化详解的全部叙述,希望大家喜欢。

Javascript 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
java必学必会之static关键字
Dec 03 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 Javascript
详解JavaScript时间格式化
Dec 23 #Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 #Javascript
js实现图片无缝滚动
Dec 23 #Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 #Javascript
js判断文本框输入的内容是否为数字
Dec 23 #Javascript
javascript新闻跑马灯实例代码
Jul 29 #Javascript
javascript动态添加checkbox复选框的方法
Dec 23 #Javascript
You might like
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
Python中__name__的使用实例
2015/04/14 Python
Python映射拆分操作符用法实例
2015/05/19 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
python操作excel让工作自动化
2019/08/09 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
少先队入队仪式主持词
2015/07/04 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书