AngularUI Datepicker deaktiviert Daten außerhalb des Bereichs

Question

Ich möchte die Angular UI Datepicker auf zwei Daten beschränken, die als Variablen übergeben werden. Am liebsten würde ich es funktionieren lassen, ohne eine Bibliothek wie momentjs hinzuzufügen, da dies das einzige Feld ist, in dem ich mit Daten arbeiten muss. Hier

ist ein Plunker dieses Problem:

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

hier sind die Variablen:

mycurrentdate = '2016-04-18' 
mymindate = '2016-04-01' 
mymaxmonth = '2016-05-01' 
mymaxdate will be calculated from mymaxmonth to be 
mymaxdate = '2016-05-31' 

Meine tatsächliche max Datum der am letzten Tag des mymaxmonth wird

$scope.maxDate = new Date(
        $scope.mymaxmonth + (TO THE END OF THE MONTH) 
       ); 

Eine Sache zu beachten ist, dass es durchläuftgibt ein Datum zurück, das der Tag vor dem angegebenen Datum ist. Zum Beispiel:

$scope.minDate = new Date(
        $scope.mymindate 
       ); 

$ scope.minDate kehrt Wed Mar 30 2016 17:00:00 GMT-0700 (PDT) sah ich den Grund auf, warum es gibt 30. März statt 1. April und es scheint wie eine Zeitzone Fehler entdeckt?

Ich möchte ein MyMindate von '2016-04-01' setzen und mymaxdate = '2016-05-31' und deaktivieren Sie alle Daten außerhalb dieses Bereichs. Ich habe Beginners Guide to Javascript Date and Time gelesen und es hier ausprobiert.

Im Controller habe ich:

$scope.mymindate = '2016-04-01'; 
$scope.mymaxmonth = '2016-05-01'; //want mymaxdate to be '2016-05-31' 

$scope.minDate = new Date($scope.dt.getFullYear(), $scope.dt.getMonth(), 1); 

$scope.maxDate = new Date($scope.dt.getFullYear(), $scope.dt.getMonth() + 1, 0); 

In der Vorlage habe ich:

<p class="input-group"> 
     <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" /> 
     <span class="input-group-btn"> 
     <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button> 
     </span> 
    </p> 

Answer 1

Nach einiger ärgerlich Datumsmanipulationen, ich habe es verstanden.Hier ist der Arbeits Plunker: http://plnkr.co/edit/6U4YdTIyFXjOqRJm2qTq?p=preview

In meinem Controller habe ich:

var mindate = new Date($scope.mymindate); 
$scope.minDate = new Date(mindate.getTime()+(1*24*60*60*1000)); //Due to poor design by the authors of ECMA-262 the date is parsed to be a day behind, so we must add a day 

var maxdate = new Date($scope.mymaxmonth); 
$scope.maxDate = new Date(maxdate.getFullYear(), maxdate.getMonth() + 2, 0); //Add a month to get to the end of the month. 

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

In meiner Vorlage:

datepicker-options="dateOptions" 

Ich habe nicht min-Datum am Ende benötigen oder Max- Datum, weil Dateoptions beide abdeckt. Ich bin ehrlich, nicht sicher, warum Sie zwei zu der macdate.getMonth() statt nur einer hinzufügen müssen, aber es hat geklappt.

Answer 2

müssen Sie datepicker-options mit der richtigen option für Ihre input abzuschalten Datum einzustellen. In Ihrem Beispiel verwendet datepicker-options="dateOptions" aber in Ihrem Controller nicht dateOptions deklariert. Geben Sie dateOptions für maxDate und minDate ein. wie

$scope.dateOptions = { 
    maxDate: new Date($scope.maxDate), 
    minDate: new Date($scope.mymindate) 
}; 

und setzen maxDate und minDate wie:

$scope.mymindate = new Date('2016-04-01'); 
$scope.mymaxmonth = new Date('2016-05-01'); //wanted mymaxdate to be '2016-05-31' 

$scope.minDate = new Date($scope.mymindate); 

$scope.maxDate = new Date($scope.mymaxmonth.getFullYear(),$scope.mymaxmonth.getMonth()+1,0); 

und HTML:

<p class="input-group"> 
    <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" min="minDate" max="maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" /> 
    <span class="input-group-btn"> 
     <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button> 
    </span> 
</p> 

Kann Plunker Demo sehen und hoffentlich wird es Ihnen helfen :)