Angular ui-bootstrap datepicker mindate not checked on input

Question

I have a form with yi-bootstrap datepicker. I want the date not to be in the past.

I set the min-date value in the directive to new Date() , as shown below. This correctly prevents past dates from being selected when using the popup, however I can still enter a date in the past, and this confirms the correctness.

How can I enforce the minimum date when entering a date?

Plunkr: https://plnkr.co/edit/EHO1BG8BspNMvsoKT30l?p=preview

Html:

 <div class="input-group"> <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" min-date="minDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" name="dt"/> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open1()"> <i class="glyphicon glyphicon-calendar"></i> </button> </span> </div> 

JS:

 app.controller('MainCtrl', function($scope) { $scope.dt = new Date(); $scope.minDate = new Date(); $scope.format = "dd/MM/yyyy"; $scope.altInputFormats = ['d!/M!/yyyy']; $scope.dateOptions = { formatYear: 'yy', startingDay: 1 }; $scope.popup1 = { opened: false }; $scope.open1 = function() { $scope.popup1.opened = true; }; }); 

Answer 1

This should work correctly, I added the changeHandler function to your controller and called it on an ng input change.

Html:

 <div class="input-group"> <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" min-date="minDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" ng-change="changeHandler()" name="dt"/> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open1()"> <i class="glyphicon glyphicon-calendar"></i> </button> </span> </div> 

JS:

 app.controller('MainCtrl', function($scope) { $scope.dt = new Date(); $scope.minDate = new Date(); $scope.format = "dd/MM/yyyy"; $scope.altInputFormats = ['d!/M!/yyyy']; $scope.dateOptions = { formatYear: 'yy', startingDay: 1 }; $scope.popup1 = { opened: false }; $scope.changeHandler = function () { $scope.dateForm.dt.$setValidity('$valid', $scope.dt.getTime() >= $scope.minDate.getTime()); } $scope.open1 = function() { $scope.popup1.opened = true; }; }); 

Answer 2

You just need to include minDate in your dateOptions object:

 app.controller('MainCtrl', function($scope) { $scope.dateOptions = { formatYear: 'yy', startingDay: 1, minDate: new Date() }; }); 

No need to change HTML