AngularJS date 过滤器
实例
以日期格式显示数字:
<!DOCTYPE html><html><script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script><body><div ng-app="myApp" ng-controller="datCtrl"><p>Date = {{ today | date }}</p></div><script>var app = angular.module('myApp', []);app.controller('datCtrl', function($scope) {$scope.today = new Date();});</script><p>日期过滤器将日期对象格式化为可读格式。</p></body></html>
定义与用法
date 过滤器将日期格式化为指定格式。
日期可以是日期对象、毫秒或类似的日期时间字符串， "2022-01-05T09:05:05.035Z"
默认情况下，格式为 "MMM d, y" (Jan 5, 2022).
语法
{{ date | date : format : timezone }}
参数值
| 值 | 描述 |
|---|---|
| format | 可选。 显示日期的日期格式，可以是以下一种或多种格式:"yyyy" year (2016)"yy" year (16)"y" year (2016)"MMMM" month (January)"MMM" month (Jan)"MM" month (01)"M" month (1)"dd" day (06) "d" day (6)"EEEE" day (Tuesday)"EEE" day (Tue)"HH" hour, 00-23 (09)"H" hour 0-23 (9)"hh" hour in AM/PM, 00-12 (09)"h" hour in AM/PM, 0-12 (9)"mm" minute (05)"m" minute (5)"ss" second (05)"s" second (5)"sss" millisecond (035)"a" (AM/PM) "Z" timezone (from -1200 to +1200)"ww" week (00-53)"w" week (0-53)"G" era (AD)"GG" era (AD)"GGG" era (AD)"GGGG" era (Anno Domini)格式值也可以是以下预定义格式之一: "short" same as "M/d/yy h:mm a" (1/5/16 9:05 AM)"medium" same as "MMM d, y h:mm:ss a" (Jan 5, 2016 9:05:05 AM)"shortDate" same as "M/d/yy" (1/5/16)"mediumDate" same as "MMM d, y" (Jan 5, 2016)"longDate" same as "MMMM d, y" (January 5, 2016)"fullDate" same as "EEEE, MMMM d, y" (Tuesday, January 5, 2016)"shortTime" same as "h:mm a" (9:05 AM)"mediumTime" same as "h:mm:ss a" (9:05:05 AM) |
| timezone | 可选。用于设置日期格式的时区 |
更多实例
实例
以自定义格式显示日期:
<!DOCTYPE html><html><script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script><body><div ng-app="myApp" ng-controller="datCtrl"><p>Date = {{ today | date : "dd.MM.y" }}</p></div><script>var app = angular.module('myApp', []);app.controller('datCtrl', function($scope) {$scope.today = new Date();});</script><p>你可以用许多不同的格式写日期。</p></body></html>
实例
使用预定义格式显示日期:
<!DOCTYPE html><html><script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script><body><div ng-app="myApp" ng-controller="datCtrl"><p>Date = {{ today | date : "fullDate" }}</p></div><script>var app = angular.module('myApp', []);app.controller('datCtrl', function($scope) {$scope.today = new Date();});</script><p>显示日期时可以使用预定义的格式。</p></body></html>
实例
显示文本和预定义格式的日期组合:
<!DOCTYPE html><html><script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script><body><div ng-app="myApp" ng-controller="datCtrl"><p>Date = {{ today | date : "'today is ' MMMM d, y" }}</p></div><script>var app = angular.module('myApp', []);app.controller('datCtrl', function($scope) {$scope.today = new Date();});</script><p>使用单引号转义文本。</p></body></html>
实例
日期作为日期时间字符串:
<!DOCTYPE html><html><script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script><body><div ng-app=""><p>Date = {{ "2016-01-05T09:05:05.035Z" | date }}</p></div><p>日期可以是日期对象、毫秒，或者像本例中一样是日期时间字符串。</p></body></html>
相关页面
AngularJS 教程: Angular 过滤器