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 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
vscode vue 文件模板的配置方法
Jul 23 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 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
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
js消除图片小游戏代码
2019/12/11 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
python中__call__内置函数用法实例
2015/06/04 Python
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
2014两会学习心得:时代的发展
2014/03/17 职场文书
蓝颜请假条
2014/04/11 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
史上最牛的辞职信
2015/02/28 职场文书
员工辞职信范文
2015/03/02 职场文书
小学远程教育工作总结
2015/08/13 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers