极客教程如何使用AngularJS改变日期格式
在这篇文章中，我们将看到如何使用AngularJS改变日期格式。AngularJS提供了2种不同的方式来改变日期的格式。它可以通过以下方法实现。
- 使用HTML模板绑定
- 使用JavaScript控制器
HTML模板绑定：在这种方法中，我们使用管道(|)操作符。这个管道操作符有助于按照所需的格式转换日期对象或数字（这包括 – angular标准格式和用户定义的格式）。在angular中，日期对象可以根据任何格式、地区和时区使用该操作符进行修改。它只将日期格式化为可读格式。
语法:
{{ dateVariable | date [ : format [ : timezone [ : locale ] ] ] }}
属性值:
- format: 预定义和用户定义的格式都可以在这个属性中使用。这个参数的默认值是-‘mediumDate’。它是一个可选的参数。
- timezone：时区的默认值是用户的本地系统时区。我们可以提供一个偏移量（’0530’）或标准的UTC/GMT（IST）或美国大陆时区缩写的值。这是一个可选参数。
- locale：地区的默认值是-‘未定义’。例如，我们可以把它设置为-‘en_US’。这是一个可选参数。
例子1：在这个例子中，我们要把当前日期改为不同的格式。这个日期格式包括标准以及用户定义的格式。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp"
ng-controller="datCtrl">
<p>
Formatted Date with default parameters:
{{ dateValue | date }}
</p>
<p>
Formatted Date with standard filter
(ShortDate): {{ dateValue | date:'shortDate' }}
</p>
<p>
Formatted Date with standard filter
(FullDate): {{ dateValue | date:'fullDate' }}
</p>
<p>
Formatted date with user defined format:
{{ dateValue | date : "'today is ' MMMM d, y" }}
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('datCtrl', function(scope) {
scope.dateValue = new Date();
});
</script>
</body>
</html>
当我们运行该代码时，它将提供不同格式的当前日期。
Input Current Date: 24th March 2020
输出:
Formatted Date with default parameters: Mar 24, 2020
Formatted Date with standard filter (ShortDate): 3/24/20
Formatted Date with standard filter (FullDate): Tuesday, March 24, 2020
Formatted date with user defined format:today is March 24, 2020
我们已经看到，使用这个管道运算符是非常容易的。现在，我们将看一下第二种方法。
使用JavaScript控制器：如果你有一个字符串格式的日期，这种方法很有帮助。
语法:
$scope.dateVariable = $filter(‘date’)(“dateString”, “dateformat”);
例子2：在这里，我们使用一个angular控制器来改变日期格式。日期是以字符串的形式传递的，通过使用$filter过滤器，它被用来过滤对象元素和数组。它为你提供指定格式的原始数组的子集。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<title>
How to change the date format using AngularJS ?
</title>
</head>
<body>
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
Input Date in String Format: {{myDate}}
<br> Output Date : {{myDateFiltered}}
</div>
</div>
<script>
var app = angular.module('MyApp', []);
app.controller('MyCtrl', ['scope', 'filter',
function(scope,filter) {
scope.myDate = new Date('2013/07/21');
scope.myDateFiltered = filter('date')
(scope.myDate, 'dd/MM/yy');
}
]);
</script>
</body>
</html>
输出:
Input Date in String Format: "2013-07-20T18:30:00.000Z"
Output Date : 21/07/13