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 相关文章推荐
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
Vue 无限滚动加载指令实现方法
May 28 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
PHP变量内存分配问题记录整理
2013/11/27 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
项目实践之javascript技巧
2007/12/06 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
python编程开发之日期操作实例分析
2015/11/13 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
python实现按长宽比缩放图片
2018/06/07 Python
人工神经网络算法知识点总结
2019/06/11 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
python 如何调用 dubbo 接口
2020/09/24 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
中学生校园广播稿
2014/01/16 职场文书
文明学生标兵事迹
2014/01/21 职场文书
个人委托书格式
2014/04/04 职场文书
销售内勤岗位职责
2014/04/15 职场文书
男性健康日的活动方案
2014/08/18 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
幼儿教师辞职信
2015/02/27 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
详解python网络进程
2021/06/15 Python
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫