AngularUI datepicker-popup - 手动键入日期和最小/最大日期

Question

我发现使用datepicker-popup时验证手动输入日期值超出minDate或maxDate值的问题。

可以通过以下步骤使用角度ui网站上的日期选择器弹出窗口进行演示：http://angular-ui.github.io/bootstrap/#/datepicker

1. 确保启用最小日期选项（最小日期应等于今天）
2. 在昨天的日期输入datepicker-popup

这显示了内联日期选择器周围的红色边框（因为它被标记为ng-invalid-date），但是datepicker-popup的输入框仍然有效。

在进一步调查中，似乎已针对datepicker的弹出部分设置了ng-invalid-date属性，而不是针对输入框。这会导致问题，因为首先，用户无法看到该元素无效，其次弹出窗口没有name属性，因此我无法检查ng-form的有效性（例如myForm.myDate。$ invalid

有没有人知道这方面的任何方法？

Answer 1

您可以对文本字段的ng-change和该字段的setValidity进行额外验证，以达到您想要的效果。这是一个展示这个想法的傻瓜。

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.change()函数中的$ scope.date。如果$scope.date为undefined，则无效。如果它的null则为空。其他任何东西都是有效的日期。