AngularUI datepicker-popup - 手动输入日期和最小/最大日期答案

【问题标题】：AngularUI datepicker-popup - manually typed date and min/max datesAngularUI datepicker-popup - 手动输入日期和最小/最大日期
【发布时间】：2014-05-08 12:54:37
【问题描述】：

在使用 datepicker-popup 时，我发现手动输入的日期值在 minDate 或 maxDate 值之外的验证存在问题。

这可以通过 angular ui 网站上的 datepicker 弹出窗口来演示，具体步骤如下：http://angular-ui.github.io/bootstrap/#/datepicker

确保打开最短日期选项（最短日期应等于今天）
在 datepicker-popup 中输入昨天的日期

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

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

有人知道解决办法吗？

【问题讨论】：

那个链接失效了

标签： angularjs validation datepicker angular-ui

【解决方案1】：

您可以对文本字段的 ng-change 进行额外验证，并将该字段的 setValidity 设置为 false 以实现您想要的。这是一个演示这个想法的plunker。

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

我添加了一点 css 样式，以便在字段无效时显示红色边框。效度测试非常基础；你想增强它以允许当前的一天。

【讨论】：

如果您需要额外的 change() 验证，最小和最大日期的角度有什么意义？它们只是用于默认值吗？

【解决方案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，那么它是空的。其他任何日期都是有效日期。

【讨论】：