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();       }     }); } 

}; });