AngularUI datepicker-popup - manually typed date and min/max dates

Question

I have found an issue with validation of a manually typed date value that falls outside of the minDate or maxDate values when using the datepicker-popup.

This can be demonstrated with the datepicker popup on the angular ui site by following the steps below: http://angular-ui.github.io/bootstrap/#/datepicker

1. Ensure the min date option is turned on (min date should equal today)
2. Type in yesterdays date to the datepicker-popup

This shows a red border around the inline datepicker (as it is flagged as ng-invalid-date) however the input box for the datepicker-popup is still valid.

On further investigation it seems that the ng-invalid-date attribute has been set against the popup part of datepicker and not against the input box. This causes issues because firstly, the user cannot see that the element is invalid and secondly the popup does not have a name property so I am unable to check validity from the ng-form (e.g. myForm.myDate.$invalid

Does anyone know any way around this?

Answer 1

You can do an additional validation on ng-change for the text field and setValidity of that field to false to achieve what you want. Here is a plunker that demonstrates the idea.

http://plnkr.co/edit/N9Hk9QFIfj3IXfHoWwbt?p=preview

I added a little css styling to get the red border to show when the field is invalid. The validity test is very basic; you'd want to enhance it to allow the current day.

Answer 2

If you have the input set up like this, <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="date" is-open="open" datepicker-options="datePickerDateOptions" close-text="Close" ng-change="change()" />

then in your controller you can check what $scope.date is in your $scope.change() function. If $scope.date is undefined then its not valid. If its null then its empty. Anything else is a valid date.