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 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
JavaScript设计模式初探
Jan 07 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
React key值的作用和使用详解
Aug 23 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
详解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 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
php 函数中使用static的说明
2012/06/01 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
js实现车辆管理系统
2020/08/26 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
银行开业庆典方案
2014/02/06 职场文书
广告词串烧
2014/03/19 职场文书
市场营销工作计划书
2014/05/06 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
年终工作总结范文
2019/06/20 职场文书
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS