如何为AngularJS定制数字/时间输入？
如何为AngularJS定制数字/时间输入？
提问于 2017-07-10 15:33:52
我想做一个输入框，防止用户输入错误的数据，并在模糊的情况下格式化用户的输入。
我想使用自定义指令，因为输入type=number有一些我不想要的特性。
<input type="text" ng-model="time" />当用户输入一个糟糕的条目时，我希望阻止他们看到并进入模型。'a‘将不显示。如果他们键入99:c，他们将不会看到'c‘或55:10:他们不会看到第二个':’
我希望这些都是有效的条目：
X小时数:y分钟数
例如：
- 99:32 - 99小时32分钟
- 9-9小时
- 0:02 -2分钟
以下是我到目前为止所拥有的：https://plnkr.co/edit/Nkjr5ahjBj4OQ3q2fMhL?p=preview
回答 1
Stack Overflow用户
发布于 2017-07-11 12:25:06
AngularJS元素指令输入时间用于创建带有时间验证和转换的HTML输入。
输入必须以ISO-8601格式提供，即本地时间格式HH: mm: ss，例如15:35:10。
数据模型必须是日期对象，用于读取/写入日期实例的时区是使用ngModel定义的。
语法：
<input type="time"
ng-model="string"
[name="string"]
[min="string"]
[max="string"]
[required="string"]
[ng-required="string"]
[ng-change="string"]>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<title>AngularJS Directives : input[time]</title>
<script src="angular.js"></script>
<style>
b{font-family:Papyrus; color:#fa4b2a; font-size: 20px;}
</style>
</head>
<body ng-app="timeDemo">
<script>
angular.module('timeDemo', [])
.controller('timeController', ['$scope', function($scope) {
$scope.sample = {
value: new Date(1999, 0, 1, 15, 30, 0)
};
}]);
</script>
<form name="demoForm" ng-controller="timeController as timeCtrl">
<label for="sampleInput">Select a time from 6 am to 6 pm</label>
<input type="time" id="sampleInput" name="input" ng-model="sample.value"
placeholder="HH:mm:ss" min="06:00:00" max="18:00:00" required />
<!-- min 6 am and max 6 pm i.e 18:00 -->
<div role="alert">
<span class="error" ng-show="demoForm.input.$error.required">
Input is Required!</span>
<!-- Required Error -->
<span class="error" ng-show="demoForm.input.$error.time">
Input Date is not Valid!</span>
<!-- Validation Error -->
</div>
<i>value = <b>{{sample.value | date: "HH:mm:ss"}}</b></i><br/>
<i>demoForm.input.$valid = <b>{{demoForm.input.$valid}}</b></i><br/>
<i>demoForm.input.$error = <b>{{demoForm.input.$error}}</b></i><br/>
<i>demoForm.$valid = <b>{{demoForm.$valid}}</b></i><br/>
<i>demoForm.$error.required = <b>{{!!demoForm.$error.required}}</b></i><br/>
</form>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45016137
复制相关文章
相似问题
腾讯云开发者
