我正在使用 AngularJS 和AngularJS 引导程序 http://angular-ui.github.io/bootstrap/在我的页面中。我有一个日期选择器指令,如下所示:
<div class="form-group {{dateStatus.class}}">
<p class="input-group">
<input type="text" id="inpDate" class="form-control"
datepicker-popup="dd-MMMM-yyyy" ng-model="task.date"
is-open="datePickerStatus.isOpen" min-date="minDate"
datepicker-options="dateOptions" ng-required="true"
close-text="Close" placeholder="Due date"
ng-change="checkDateValidity()"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="openDatePicker($event)"
>
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
为了验证日期输入,在我的控制器中我有以下函数:
$scope.checkDateValidity = function(){
var date,
isValid,
taskDate;
taskDate = $scope.task.date;
date = new Date(taskDate);
isValid = !isNaN(date);
if(isValid) {
$scope.addButtonState.isOk = true;
$scope.dateStatus.class = '';
}
else{
$scope.addButtonState.isOk = false;
$scope.dateStatus.class = 'has-error';
}
}
检查插入的日期是否有效一切正常,但问题是当日期输入留空(或从有效状态更改为空白)时
我也希望它是可以接受的,但是由于空输入和无效日期都是undefined
我不知道如何在案件之间声明。
我还想到直接读取输入文本,如下所示:
document.getElementById('inpDate').value
但是当值更改时会触发 ng-change ,并且我留下了以前的值,现在没用了......
感谢您的时间和回复。
更好的验证方法是使用指令添加验证规则。
.directive("validateDate", function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$validators.validateDate = function(modelValue, viewValue) {
if(!isNaN(modelValue) || ctrl.$isEmpty(modelValue)){
return true;
}
return false;
};
}
};
})
那么你只需要添加validate-date
到输入标记,如果输入为 !isNaN(当日期为数字或为空时),验证会将输入标记为有效
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)