AngularUI Datepicker wyłącz daty poza zakresem

Question

Chciałbym ograniczyć Datepicker Angular UI do dwóch dat przekazanych jako zmienne. Najlepiej byłoby, gdyby działał bez dodawania biblioteki typu instantjs, ponieważ jest to jedyne pole, w którym muszę pracować z datami.

Oto plunker tego problemu:

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

tutaj są zmienne:

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

Moja rzeczywista data max będzie ostatnim dniem mymaxmonth

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

Jedną z rzeczy do zapamiętania jest to, że działa to przez new Date() zwraca datę, która jest na dzień przed podaną datą. Na przykład:

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

$ scope.minDate powraca Wed Mar 30 2016 17:00:00 GMT-0700 (PDT) Spojrzałem w górę powód dlaczego zwraca Marzec 30 zamiast 1 kwietnia i wydaje się błędem strefy czasowej?

Chcę ustawić mymindate z "2016-04-01" i uzyskać mymaxdate = "2016-05-31" i wyłączyć wszystkie daty poza tym zakresem. Przeczytałem Beginners Guide to Javascript Date and Time i wypróbowałem to tutaj.

W regulatorze mam:

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

W szablonie mam:

<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

Po jakiś przykry manipulacje datami, mam to. Oto plunker robocze: http://plnkr.co/edit/6U4YdTIyFXjOqRJm2qTq?p=preview

W moim kontroler mam:

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

W moim szablonu:

datepicker-options="dateOptions" 

nie skończyć konieczności min nieaktualne lub max- data, ponieważ dateoptions obejmuje oba. Będę szczery, nie wiem, dlaczego musisz dodać dwa do macdate.getMonth() zamiast tylko jednego, ale się udało.

Answer 2

trzeba ustawić datepicker-options z właściwego option dla datą input wyłączyć. W twoim przykładzie użyty datepicker-options="dateOptions", ale w twoim kontrolerze nie zadeklarował dateOptions.

Musisz ustawić dateOptions dla maxDate i minDate. jak

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

i ustawić maxDate i minDate jak:

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

i 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> 

widać Plunker Demo i mam nadzieję, że to pomoże Ci :)