AngularJS date过滤器详解及示例

作者 : 慕源网 本文共1786个字,预计阅读时间需要5分钟 发布时间: 2022-05-4 共138人阅读

AngularJS date过滤器,AngularJS 中 date过滤器用于将日期转换为指定格式。未指定日期格式时,默认日期格式为 ‘MMM d, yyyy’。

语法:

{{ date | date : format : timezone }}

参数值:date过滤器包含可选的格式和时区参数。

格式中使用的一些常用值如下:

  • ‘yyyy’ – 定义年份,例如2019
  • ‘yy’ – 定义年份 ,例如19
  • ‘y’ – 定义年份,例如2019
  • ‘MMMM’ – 定义月份,例如 四月
  • ‘MMM’ – 定义月份 ,例如 四月
  • ‘MM’ – 定义月份 ,例如 04
  • ‘dd’ – 定义日期前。09
  • ‘d’ – 定义日期前。9
  • ‘hh’ – 以 AM/PM 定义小时
  • ‘h’ – 以 AM/PM 定义小时
  • ‘mm’ – 定义分钟
  • ‘m’ – 定义分钟
  • ‘ss’ – 定义 两位数字表示秒(00-59)
  • ‘s’ – 定义秒(0-59)

一些预定义的格式值如下:

  • “short”——相当于“M/d/yy h:mm a”
  • “medium”——相当于“MMM d, yh:mm:ss a”
  • “shortDate”——相当于“M/d/yy”(5/7/19)
  • “mediumDate”——相当于“MMM d, y”(2019 年 5 月 7 日)
  • “longDate”——相当于“MMMM d, y”(2019 年 5 月 7 日)
  • “fullDate”——相当于“EEEE, MMMM d, y”(2019 年 5 月 7 日,星期二)
  • “shortTime”——相当于“h:mm a”(凌晨 2:35)
  • “mediumTime”——相当于“h:mm:ss a”(上午 2:35:05)

示例 1:

<!DOCTYPE html>
<html>
	<head>
		<title>Date Filter</title>
		
		<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
		</script>
	</head>
	
	<body>

		<div ng-app="gfgApp" ng-controller="dateCntrl">
			

<p>{{ today | date : "dd.MM.y" }}</p>


		</div>

		<script>
			var app = angular.module('gfgApp', []);
			app.controller('dateCntrl', function($scope) {
				$scope.today = new Date();
			});
		</script>
	</body>
</html>

输出:

07.05.2019

示例 2:

<!DOCTYPE html>
<html>
	<head>
		<title>Date Filter</title>
		
		<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
		</script>
	</head>
	
	<body>

		<div ng-app="gfgApp" ng-controller="dateCntrl">
			

<p>{{ today| date : 'mediumTime'}}</p>


		</div>

		<script>
			var app = angular.module('gfgApp', []);
			app.controller('dateCntrl', function($scope) {
				$scope.today = new Date();
			});
		</script>
	</body>
</html>

输出:

2:37:23 AM

示例 3:

<!DOCTYPE html>
<html>
	<head>
		<title>Date Filter</title>
		
		<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
		</script>
	</head>
	
	<body>

		<div ng-app="gfgApp" ng-controller="dateCntrl">
			

<p>{{ today| date }}</p>


		</div>

		<script>
			var app = angular.module('gfgApp', []);
			app.controller('dateCntrl', function($scope) {
				$scope.today = new Date();
			});
		</script>
	</body>
</html>

输出:

May 7, 2019

慕源网 » AngularJS date过滤器详解及示例

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录