AngularJS 日期格式化详解_AngularJS

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 日期格式化详解的全部叙述,希望大家喜欢。

时间: 2024-12-23 18:52:39

AngularJS 日期格式化详解_AngularJS的相关文章

AngularJS自定义控件实例详解_AngularJS

本文实例讲述了AngularJS自定义控件.分享给大家供大家参考,具体如下: 自定义指令介绍 AngularJS 指令作用是在 AngulaJS 应用中操作 Html 渲染.比如说,内插指令 ( {{ }} ), ng-repeat 指令以及 ng-if 指令. 当然你也可以实现自己的.这就是 AngularJS 所谓的"教会 HTML 玩新姿势".本文将告诉你如何做到. 指令类型 可以自定义的指令类型如下: 元素 属性 CSS class Comment directives 这里面

AngularJs E2E Testing 详解_AngularJS

        当一个应用的复杂度.大小在增加时,使得依靠人工去测试新特性的可靠性.抓Bug和回归测试是不切实际的. 为了解决这个问题,我们建立了Angular Scenario Runner,模仿用户的操作,帮助我们去验证angular应用的健壮性. 一.   总括 我们可以在javascript中写情景测试(scenario test),描述我们的应用发生的行为,在某个状态下给与某些互动.一个情景包含一个或者多个"it"块(我们可以将这些当作对我们应用的要求),依次由命令(comm

Angularjs过滤器使用详解_AngularJS

给大家介绍下什么是 AngularJS? AngularJS是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于,利用?数据绑定?和?依赖注入,它使你不用再写大量的代码了.这些全都是通过浏览器端的Javascript实现,这也使得它能够完美地和任何服务器端技术结合. AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的

AngularJS 工作原理详解_AngularJS

 个人觉得,要很好的理解AngularJS的运行机制,才能尽可能避免掉到坑里面去.在这篇文章中,我将根据网上的资料和自己的理解对AngularJS的在启动后,每一步都做了些什么,做一个比较清楚详细的解析.      首先上一小段代码(index.html),结合代码我们来看看,angular一步一步都做了些什么. <!doctype html> <html ng-app> <head> <script src="angular.js">&

Donet中C#日期格式化详解介绍

 代码如下 复制代码 DateTime dt = DateTime.Now; Label1.Text = dt.ToString();//2009-07-5 13:21:25 Label2.Text = dt.ToFileTime().ToString();//127756416859912816 Label3.Text = dt.ToFileTimeUtc().ToString();//127756704859912816 Label4.Text = dt.ToLocalTime().ToSt

java DateFormat日期格式化详解

DateFormat支持风格或形状,你可以有四种不同类型格式日期对象.参考下表 Value Example DateFormat.SHORT. For example, 12/2/05 DateFormat.MEDIUM. For example, Dec 2, 2005. DateFormat.LONG. For example, December 2, 2005 DateFormat.FULL. For example, Friday, December 2, 2005 看一个简单的输出实例

Smarty中date_format日期格式化详解

php中格式化输出日期和时间可用:date('Y-m-d H:i:s',时间戳); 的形式输出,对应的是"年-月-日 时:分:秒". Smarty中date_format函数都支持哪些格式 date_format支持格式: %a - 当前区域星期几的简写 %A - 当前区域星期几的全称 %b - 当前区域月份的简写 %B - 当前区域月份的全称 %c - 当前区域首选的日期时间表达 %C - 世纪值(年份除以 100 后取整,范围从 00 到 99) %d - 月份中的第几天,十进制数

AngularJS Module方法详解_AngularJS

AngularJS是什么? AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架.首先,它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用.它不仅仅是一个javascript框架,因为它的核心其实是对HTML标签的增强. 何为HTML标签增强?其实就是使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签.自定义属性等,这些HTML原生没有的标签/属性在ng中有一个名字:指令(directive).后面会详细介绍.那么,什么又是动态web应用呢?

AngularJS ng-bind-template 指令详解_AngularJS

AngularJS ng-bind-template 指令 AngularJS 实例 <p> 元素上绑定两个表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>