angular-ui-bootstrap - 将 uib-datepicker 限制为一年

Question

如何将 uib-datepicker 修复为仅一年。（仅说当年）。

我尝试搜索，但我能找到的只是将日历限制为仅年份模式。我尝试year:2016 在 datepicker-options 中进行设置，但没有成功。

有什么建议么 ？？？

Answer 1

您可以按照文档中的描述在对象中使用minDate和maxDate属性。datepicker-options

以下代码显示了仅限于当前年份的日期选择器：

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>

请注意，我使用了 moment startOf，endOf并将toDate当年的第一天和最后一天作为 Date 对象。