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

赞 (0)

相关推荐

  • AngularJS实现Input格式化的方法

    本文实例讲述了AngularJS实现Input格式化的方法.分享给大家供大家参考,具体如下: 今天在Angular中文群有位同学问到:如何实现对input box的格式化.如下的方式对吗? <input type="text" ng-model="demo.text | uppercase" /> 这当然是不对的.在Angular中filter(过滤器)是为了显示数据的格式,它将$scope上的Model数据格式化View显示的数据绑定到DOM之上.它并

  • Angular.js组件之input mask对input输入进行格式化详解

    前言 最近因为项目的需要,经常有一些对input输入进行格式化的需求,以前做的时候在js中写指令进行处理,但是这样又要在js或者在java代码中将请求的数据进行还原,很是麻烦,于是在网上看到了jquery的inputmask组件,觉得很好用,在项目中写出指令,用起来很方便. 方法如下: 在项目中引入jquery和jquery-inputmask,然后在项目中写指令,如下: define(['./module'], function (directives) { 'use strict'; dir

  • AngularJS 日期格式化详解

    AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. AngularJS的日期格式化有两种形式,一种是在HTML页面,一种是在JS代码里,都是用到AngularJS的过滤器$filter. HTML: date_expression 即 你在$scope中设的date类型变量(注意,一定是date object才正确), 也是要显

  • JS利用Intl解决前端日期和时间的格式化详解

    目录 简介 构造 locales 参数 options 参数 Intl.NumberFormat Intl.DateTimeFormat 简介 Intl 是一个全局对象,它的主要用途就是展示国际化信息,可以将字符串,数字和日期和时间转换为指定地区的格式. 在前端开发中,我们通常会使用第三方库来处理日期和数字的格式化,比如 numeral.dayjs.date-fns 等库,这些库包含了许多的功能,如果我们在项目中仅仅只使用了格式化的功能的话其实是可以不用引入这些库的,JavaScript 自带的

  • moment.js 时间日期处理详解

    周一 至 周日 时间格式化转化 (Y --- 年     M --- 月   D--- 天) var timeNow = new Date()// 当前时间 var weekOfday = moment(timeNow).format('E'); // 计算今天是这周第几天 var nowDay = moment(timeNow).format('YYYY-MM-DD') // 当前日期 var Monday = moment(timeNow).subtract(weekOfday - 1, '

  • Angularjs上传图片实例详解

    •上传图片需要引入插件ngFileUpload,使用bower安装方法: bower install ng-file-upload --save,安装后需要在命名app的名字js文件中注入,如下所示: (function() { angular.module('app', [ 'ionic','ngStorage','ngFileUpload' ]); })(); •在相应的html中引入文件路径:<script src="lib/ng-file-upload/ng-file-upload

  • AngularJS日程表案例详解

    功能:添加事件/完成事件/删除事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .note{ margin:0 auto; background: orange; color: ora

  • AngularJS Toaster使用详解

    AngularJS Toaster是一个 AngularJS 提示框.基于angular v1.2.6 及以上和angular-animate. (推荐使用 /1.2.8/angular-animate.js, 因为高版本会有怪异闪烁.) 引入脚本 <link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.16/toaster.min.css" rel="stylesheet&quo

  • Angularjs Promise实例详解

    一.什么是Promise Promise是对象,代表了一个函数最终可能的返回值或抛出的异常,就是用来异步处理值的. Promise是一个构造函数,自己身上有all.reject.resolve这几个异步方式处理值的方法,原型上有then.catch等同样很眼熟的方法. 二.为什么使用Promise 有了Promise对象,就可以把异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数.此外,Promise对象提供了统一的接口,使得控制异步操作更加容易. Promise对象有以下2个特点: 1

  • jquery 时间戳转日期过程详解

    jquery 时间戳转日期过程详解

    这篇文章主要介绍了jquery 时间戳转日期过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 搜了一下发现这个时间戳转时间的代码很好用,附上实践的代码 结果如下 代码如下 /** * 时间戳转日期 * @param timestamp * @returns {*} */ function timestampToTime(timestamp) { var date = new Date(timestamp * 1000);//时间戳为10位

  • AngularJS日期格式化常见操作实例分析

    AngularJS日期格式化常见操作实例分析

    本文实例讲述了AngularJS日期格式化常见操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net AngularJS日期格式化</title> <script src="http

  • Python基础之字符串格式化详解

    一.前言 Python的字符串格式化有两种方式:百分号方式 和 format方式 百分号的方式相对来说比较老, format方式则是相对比较先进,企图替换古老的方式,目前两者都支持. 二.百分号 %[(name)][flags][width].[precision]typecode """ (name) 可选,用于选择指定的key flags 可选,可供选择的值有: + 右对齐:正数前加正好,负数前加负号: - 左对齐:正数前无符号,负数前加负号: 空格 右对齐:正数前加空格

随机推荐