AngularUI Datepicker disabilita le date al di fuori dell'intervallo

Question

Voglio limitare l'UI Datepicker angolare tra due date passate come variabili. Preferibilmente mi piacerebbe farlo funzionare senza aggiungere una libreria come momentjs, perché questo è l'unico campo in cui ho bisogno di lavorare con le date.

Ecco una plunker di questo problema:

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

qui sono le variabili:

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

mia data effettiva max sarà l'ultimo giorno di mymaxmonth

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

Una cosa da notare è che passa attraverso new Date() restituisce una data che è il giorno prima della data specificata. Per esempio:

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

$ scope.minDate torna Wed Mar 30 2016 17:00:00 GMT-0700 (PDT) ho guardato il motivo per cui viene restituito il 30 marzo anziché 1 aprile e sembra un errore di fuso orario?

Desidero impostare un mymindate di '01-04-01 'e ottenere mymaxdate =' 2016-05-31 'e disabilitare tutte le date al di fuori di questo intervallo. Ho letto Beginners Guide to Javascript Date and Time e l'ho provato qui.

Nel controllore ho:

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

Nel modello che ho:

<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

Dopo un po 'fastidioso manipolazioni di date, ho capito. Ecco il plunker di lavoro: http://plnkr.co/edit/6U4YdTIyFXjOqRJm2qTq?p=preview

Nel mio regolatore ho:

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

nel mio modello:

datepicker-options="dateOptions" 

non ho finire che necessitano min-data o max- data perché dateoptions copre entrambi. Sarò onesto, non sono sicuro del motivo per cui devi aggiungere due a macdate.getMonth() invece di uno solo, ma ha funzionato.

Answer 2

è necessario impostare datepicker-options con una corretta option per la vostra data input per disabilitare. Nel tuo esempio usato datepicker-options="dateOptions" ma nel tuo controller non dichiarare dateOptions.

Quindi è necessario impostare dateOptions per maxDate e minDate. come

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

e impostare maxDate e minDate come:

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

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

Può vedere Plunker Demo e spero che vi aiuterà a :)