javascript - 用户可以在 AngularUI Datepicker 中输入无效日期

Question

我在 AngularUI Bootstrap Datepicker 中遇到了一个问题，我有一个最小日期和一个最大日期。如果打开弹出窗口，则无法单击禁用日期。但是，您可以输入范围之外的日期。如果输入的日期低于它，我希望它把它带到最小日期，如果输入的日期晚一些，我希望它把它带到最短日期。

这里是 plunker:http://plnkr.co/edit/6U4YdTIyFXjOqRJm2qTq?p=preview

在 Controller 中:

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

在模板中:datepicker-options="dateOptions"

除非必要，否则我想避免使用 jQuery 或日期库，因为这是我唯一需要此功能的领域。

如果有帮助，我发现了一些关于此问题的报告，但是它们被标记为“已修复”，所以我可能遗漏了一些东西。

https://github.com/angular-ui/bootstrap/pull/2901

https://github.com/angular-ui/bootstrap/pull/3020

类似stackflow的问题

AngularUI datepicker allows typing value outside of range实际上有一个工作的 plunker 但它不是 angularui datepicker，并且接受的答案暗示了一个我想避免的插件。我确实尝试在我的模板中使用 ui-date="dateOptions" 与 plunker 相同，但没有任何改变。

我正在考虑这样的指令:

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);
        }
    }
};
});

并将 is-valid-date 添加到模板中。但是，这不起作用:(

Answer 1

我已经制定了适合您的指令，让我知道这个解决方案适合您:Plukr url here

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();
      }
    });
}

};});