极客教程在AngularJS中使用ng-model格式化一个日期
ng-model指令用于将输入字段的值绑定到控制器中的一个属性。格式化器用于将输入的值从一种文本表示法转换为另一种所需的表示法。当日期需要按照国家规定的格式在不同的地方更新时，用于日期格式化的格式化器非常有用。
语法：以下属性必须被添加到HTML标签中，如下面的例子所示。
input type = "date" id = "exampleInput"
name = "input" ng_model = "example.value"
用法:
input type = " date "
ng-model = " string "
[ name = " string " ]
[ min = " string " ]
[ max = " string " ]
[ ng-min = " " ]
[ ng-max = " " ]
[ required = " string " ]
[ ng-required = " string " ]
[ ng-change = " string " ]
上述参数被用作ng模块的输入组件。在下面的例子中，我们将看到其中一些参数是如何被使用的。
例子1：第一个例子展示了如何改变一个日期的格式。这是一个简单的HTML代码，你的国家格式日期的ng-model值被改变成其他国家的格式日期。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Format a Date using ng-model in AngularJS </title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="gfg">
<div ng-controller="dateCtrl" class="container">
<script>
angular.module('gfg', [])
.controller('dateCtrl', function(scope) {
scope.firstDate = new Date();
scope.secondDate = "2020-05-20";
}).directive('date', function(dateFilter) {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
var dateFormat = attrs['date'] || 'yyyy-MM-dd';
ctrl.formatters.unshift(function(modelValue) {
return dateFilter(modelValue, dateFormat);
});
}
};
})
</script>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<label for=""> Standard format for India </label>
<input type="text"
date='dd-MM-yyyy'
ng-model="secondDate"
class="form-control" />
<p class="text-primary">
<label for=""> Standard format for Korea </label>
</p>
{{secondDate}}
</center>
</div>
</div>
</body>
</html>
输出:
例子2：在下面的HTML代码片段中，显示了如何从日期选择器菜单中输入日期，然后用给定的格式表示，即yyyy-mm-dd。此外，还提供了一个验证检查，以检查用户给出的日期是否在程序要求的范围内。对于最小和最大日期值，我们使用了 “min “和 “max “参数，具体如下 min = “{{minDate | date:’yyyy-MM-dd’}” and max = “{{maxDate | date:’yyyy-MM-dd’}”。另外，”required “参数设置了所需的验证错误键，如果该值没有被输入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Format a Date using ng-model in AngularJS
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="dateInputExample"
style="text-align:center">
<script>
angular.module('dateInputExample', [])
.controller('DateController', ['scope',
function(scope) {
scope.example = {
value: new Date(2020, 4, 25)
};
}
]);
</script>
<form name="myForm"
ng-controller="DateController as dateCtrl">
<h1 style="color: green">
GeeksforGeeks
</h1>
<label for="exampleInput">
Pick a date in 2020:
</label>
<input type="date"
id="exampleInput"
name="input"
ng-model="example.value"
placeholder="yyyy-MM-dd"
min="2020-01-01"
max="2020-12-31" required />
<div role="alert">
<span class="error"
ng-show="myForm.input.error.required">
Required!
</span>
<span class="error"
ng-show="myForm.input.error.date">
Not a valid date!
</span>
</div>
<tt>
value = {{example.value |
date: "yyyy-MM-dd"}}
</tt><br />
<tt>
Is valid date =
{{myForm.input.valid}}
</tt><br />
</form>
</body>
</html>
输出:
