Benutzer kann ungültiges Datum eingeben in AngularUI Datepicker

Question

Ich habe ein Problem, wo in der AngularUI Bootstrap Datepicker ich ein Minimum-Datum und ein Maximum-Datum habe. Wenn Sie das Popup öffnen, können Sie nicht auf die deaktivierten Daten klicken. Sie können jedoch ein Datum außerhalb des Bereichs eingeben. Ich möchte, dass es das Min-Datum einbringt, wenn das eingegebene Datum darunter liegt, und das Max-Datum, wenn das eingegebene Datum später ist. Hier

ist der Plunker: http://plnkr.co/edit/6U4YdTIyFXjOqRJm2qTq?p=preview

In der Steuerung:

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

In der Vorlage: datepicker-options="dateOptions"

Ich mag mit jQuery oder einem Datum Bibliothek wenn es nicht notwendig vermeiden, da Dies ist das einzige Feld, in dem ich diese Funktionalität brauche.

Wenn es hilft, habe ich einige Berichte über dieses Problem gefunden, aber sie sind als "behoben" markiert, so dass ich vielleicht etwas vermisse.

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

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

Die ähnliche stackflow Frage

AngularUI datepicker allows typing value outside of range hat tatsächlich einen Arbeits Plunker aber es ist nicht angularui picker, und die akzeptierte Antwort schlägt ein Plug-in, das ich will vermeiden. Ich habe versucht, ui-date="dateOptions" in meiner Vorlage die gleiche wie die Plunker, aber nichts zu ändern.

ich von einer Art Richtlinie denke etwa so:

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

und das Hinzufügen von is-valid-date zu der Vorlage. Dies ist jedoch nicht :(

Answer 1

arbeite ich Richtlinie gemacht für Sie zu arbeiten, lassen Sie mich wissen, diese Lösung für Sie: 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(); 
     } 
    }); 
} 

}; });