usib-datepicker auf nur ein Jahr beschränken

Question

Wie repariere ich den uib-datepicker auf nur ein Jahr? (nur aktuelles Jahr).

Ich habe versucht zu suchen, aber alles, was ich finden konnte, war, den Kalender nur auf den Jahresmodus zu beschränken. Ich habe versucht, year:2016 in Datepicker-Optionen, aber es hat nicht funktioniert.

Irgendwelche Vorschläge ???

Answer 1

Sie können minDate und maxDate Eigenschaften im datepicker-options Objekt wie in der docs beschrieben verwenden.

Der folgende Code zeigt eine Datepicker auf das laufende Jahr beschränkt:

angular.module('MyApp',['ui.bootstrap']).controller('AppCtrl', function($scope) { 
 
    $scope.open1 = function() { 
 
    $scope.popup1.opened = true; 
 
    }; 
 
    
 
    $scope.dateOptions = { 
 
    minDate: moment().startOf('year').toDate(), 
 
    maxDate: moment().endOf('year').toDate() 
 
    }; 
 
    
 
    $scope.format = 'dd-MMMM-yyyy'; 
 

 
    $scope.popup1 = { 
 
    opened: false 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-animate.min.js "></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-touch.min.js "></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script> 
 

 
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/> 
 

 
<div ng-app="MyApp" ng-controller="AppCtrl"> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <p class="input-group"> 
 
     <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" show-button-bar="false" /> 
 
     <span class="input-group-btn"> 
 
      <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button> 
 
     </span> 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

Bitte beachte, dass ich derzeit verwendet startOf, endOf und toDate die ersten und die letzten Tage des Stroms zu erhalten Jahr als Datumsobjekte.