[英]AngularJs BootstrapUI Datepicker validation
I need to validate the date of the datepicker and also limit the years (avoid 15-05-9999 for example). 我需要验证datepicker的日期并限制年份(例如,避免15-05-9999)。
This is my HTML code: 这是我的HTML代码:
<p class="input-group">
<input type="text" name="raisedOnDate" class="form-control" ng-model="date" ng-disabled="!viewSearchEvent.raisedOnActive"
datepicker-popup="{{format}}" is-open="opened1" datepicker-options="dateOptions" date-validator required />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event,'on')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
<p ng-show="!searchEventsForm.$valid" style="color: red;">Date is invalid!</p>
<p ng-show="searchEventsForm.$valid" style="color: green;">Date is valid!</p>
This is inside a <form name="searchEventsForm" role="form" class="form-horizontal" novalidate>
. 这是在<form name="searchEventsForm" role="form" class="form-horizontal" novalidate>
。
I made this directive to validate date type: 我做了这个指令来验证日期类型:
app.directive('dateValidator', function() {
return {
require: 'ngModel',
link: function (scope, elem, attr, ngModel) {
function validate(value) {
var d = Date.parse(value);
// it is a date
if (isNaN(d)) { // d.valueOf() could also work
ngModel.$setValidity('valid', false);
} else {
ngModel.$setValidity('valid', true);
}
}
scope.$watch(function () {
return ngModel.$viewValue;
}, validate);
}
};
}); });
But, I can enter dates like 25-05-999999999, and that is not the idea. 但是,我可以输入25-05-999999999之类的日期,这不是主意。
I managed to make it work so if it is a date it shows a message saying "Date is valid" and if not "date is invalid". 我设法让它工作,所以如果它是一个日期,它会显示一条消息,说“日期有效”,如果不是“日期无效”。
But I'm stuck there. 但我被困在那里。
Any ideas on how can I put year limit and character limits and make it work? 关于如何设置年限和字符限制并使其有效的任何想法?
I tried already with max-date
, max
, and others. 我已经尝试过max-date
, max
等。
If you need more info just ask, I don't know if it is clear enough or well explained. 如果你需要更多的信息,我不知道它是否足够清楚或解释清楚。 Thank you for the help! 感谢您的帮助! ;) ;)
Why dont you use ng-pattern?? 为什么不使用ng-pattern? instead of making a new directive. 而不是制定新的指令。
Read more about it here NG-PATTERN DOCS 在这里阅读更多关于它的NG-PATTERN DOCS
ng-pattern="/^(\d{4})-(\d{2})-(\d{2})$/"
Take a look at this fiddle with a better solution 看看这个小提琴有一个更好的解决方案
validate datepicker using ng-pattern 使用ng-pattern验证datepicker
used this: maxlength="10"
on the html to limit characters. 使用这个:html上的maxlength="10"
来限制字符。
and this is to validate the date format is correct (avoid 1/1/1, or 11/06/201): 这是为了验证日期格式是否正确(避免1/1/1或11/06/201):
MyDirective.directive('dateValidator', function() {
return {
require: 'ngModel',
link: function (scope, elem, attr, ngModel) {
function validate(value) {
if (value !== undefined && value != null) {
ngModel.$setValidity('badDate', true);
if (value instanceof Date) {
var d = Date.parse(value);
// it is a date
if (isNaN(d)) {
ngModel.$setValidity('badDate', false);
}
} else {
var myPattern = new RegExp(/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/);
if (value !='' && !myPattern.test(value)) {
ngModel.$setValidity('badDate', false);
}
}
}
}
scope.$watch(function () {
return ngModel.$viewValue;
}, validate);
}
};
});
Still didn't manage to fix a min date and max date, but is not urgent. 仍然无法确定最小日期和最长日期,但并不紧急。 Hope it can help people in future issues. 希望它可以帮助人们解决未来的问题。
Your solution uses 'scope.$watch' to do what ngModel's '$parsers' and '$formatters' was built to do. 您的解决方案使用'scope。$ watch'来执行ngModel的'$ parsers'和'$ formatters'。 Take a look here: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController 看看这里: https : //docs.angularjs.org/api/ng/type/ngModel.NgModelController
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.