AngularUI datepicker-popup - manually entered date and minimum / maximum dates

Question

I found a problem with checking a manually entered date value that goes beyond the minDate or maxDate values ​​when using the datepicker popup.

This can be demonstrated using the datepicker popup on the angular ui website by following these steps: http://angular-ui.imtqy.com/bootstrap/#/datepicker

• Make sure the minus date option is enabled (minimum date should be today)
• Enter yesterday's date in the datepicker-popup folder

This shows a red border around the built-in datepicker (since it is marked as ng-invalid-date), however the input field for the datepicker popup is still valid.

Upon further investigation, it seems that the ng-invalid-date attribute is set against the datepicker popup, and not for the input field. This causes problems because, firstly, the user does not see that the element is invalid, and secondly, the popup does not have a name property, so I can’t check the correctness from the ng form (for example, myForm.myDate. $ Invalid

Does anyone know about this?

Answer 1

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

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

CSS-, , . ; , .

Answer 2

, , <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()" />

, $scope.date $scope.change(). $scope.date - undefined, . null, . .