javascript - User can type invalid date into AngularUI Datepicker -
i having problem in angularui bootstrap datepicker have min date , max date. if open popup, can't click on disabled dates. able type in date outside of range. want bring min date if typed date below , max date if typed date later.
here plunker: http://plnkr.co/edit/6u4ydtiyfxjoqrjm2qtq?p=preview
in controller:
$scope.dateoptions = { maxdate: $scope.maxdate, mindate: $scope.mindate, };
in template: datepicker-options="dateoptions"
i'd avoid using jquery or date library unless necessary, since field need functionality.
if helps, have found reports of issue, marked "fixed" maybe missing something.
https://github.com/angular-ui/bootstrap/pull/2901
https://github.com/angular-ui/bootstrap/pull/3020
the similar stackflow question
angularui datepicker allows typing value outside of range has working plunker isn't angularui datepicker, , accepted answer suggests plug-in, want avoid. did try using ui-date="dateoptions"
in template same plunker nothing changed.
i thinking of sort of directive so:
angular.module('ui.bootstrap.demo').directive('isvaliddate', function() { return { restrict: 'a', require: 'ngmodel', link: function(scope, elem, attrs, ctrl) { //first, assume it's valid date until check ctrl.$setvalidity('isvaliddate', true); if(scope.dt > attrs.maxdate || scope.dt < attrs.mindate) { ctrl.$setvalidity('isvaliddate', false); } } }; });
and adding is-valid-date
template. however, not working :(
i have made directive working you, let me know solution works you: plukr url here
angular.module('ui.bootstrap.demo').directive('isvaliddate', function() { return { restrict: 'a', require: 'ngmodel', link: function(scope, elem, attrs, ctrl) { scope.invaliddatechoosen= false; elem.bind("change", function(){ ctrl.$setvalidity('isvaliddate', true); if(scope.dt > scope.mymaxmonth || scope.dt < scope.mymindate) { scope.dt=''; scope.invaliddatechoosen=true; ctrl.$setvalidity('isvaliddate', false); scope.$apply(); } }); }
}; });
Comments
Post a Comment