Javascript 用户可以在AngularUI日期选择器中键入无效日期

我遇到了一个问题，在AngularUI引导日期选择器中，我有一个最小日期和一个最大日期。如果打开弹出窗口，则无法单击禁用日期。但是，您可以键入超出范围的日期。如果键入的日期低于此日期，我希望它将其设置为最小日期，如果键入的日期晚于此日期，则设置为最大日期

这是普朗克：

在控制器中：

$scope.dateOptions = {
    maxDate: $scope.maxDate,
    minDate: $scope.minDate,
};

在模板中：

datepicker options=“dateOptions”

除非必要，否则我希望避免使用jQuery或日期库，因为这是我唯一需要此功能的字段

如果有帮助的话，我已经找到了一些关于这个问题的报告，但是它们被标记为“已修复”，所以我可能遗漏了一些东西

类似的stackflow问题

实际上有一个可以工作的plunker，但它不是angularui datepicker，而公认的答案建议使用一个插件，这是我想要避免的。我确实尝试在我的模板中使用与plunker相同的

ui date=“dateOptions”

，但没有任何更改

我在想这样的指示：

angular.module('ui.bootstrap.demo').directive('isValidDate', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attrs, ctrl) {

        //first, assume it's a valid date until check
        ctrl.$setValidity('isValidDate', true);

        if(scope.dt > attrs.maxDate || scope.dt < attrs.minDate) {
            ctrl.$setValidity('isValidDate', false);
        }
    }
};
});

angular.module（'ui.bootstrap.demo'）.directive（'isValidDate'，function（）{
返回{
限制：“A”，
要求：'ngModel'，
链接：函数（范围、元素、属性、ctrl）{
//首先，假设这是一个有效日期，直到检查为止
ctrl.$setValidity（'isValidDate'，true）；
if（scope.dt>attrs.maxDate | | scope.dt

---

将

添加到模板中是有效日期。但是，这不起作用：（
我已使指令对您起作用，请让我知道此解决方案对您有效：Plukr url

angular.module（'ui.bootstrap.demo'）.directive（'isValidDate'，function（）{
返回{
限制：“A”，
要求：'ngModel'，
链接：函数（范围、元素、属性、ctrl）{
scope.invalidDateChoosen=false；
元素绑定（“更改”，函数（）{
ctrl.$setValidity（'isValidDate'，true）；
if（scope.dt>scope.mymaxmonth | | scope.dt

})；
})；
需要注意的一点是，如果在无效日期之后选择了有效日期，则错误消息不会消失。
angular.module('ui.bootstrap.demo').directive('isValidDate', function() {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attrs, ctrl) {
     scope.invalidDateChoosen= false;
    elem.bind("change", function(){  
    ctrl.$setValidity('isValidDate', true);
      if(scope.dt > scope.mymaxmonth || scope.dt < scope.mymindate) {
        scope.dt='';
        scope.invalidDateChoosen=true;
        ctrl.$setValidity('isValidDate', false);
        scope.$apply();
      }
    });
}