Question

on Page load我们可以使用Angular UIB日期选择器显示两个月的日历。

这是HTML：

<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.1.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
<div ng-controller="DatepickerDemoCtrl">
      <div uib-datepicker ng-model="dt" datepicker-options="options"></div>
    </div>
  </body>
</html>

这是js代码：

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
  $scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();

  $scope.clear = function() {
    $scope.dt = null;
  };

  $scope.options = {
    numberOfMonths: 2,
    customClass: getDayClass,
    minDate: new Date(),
    showWeeks: true
  };

  // Disable weekend selection
  function disabled(data) {
    var date = data.date,
      mode = data.mode;
    return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
  }

  $scope.toggleMin = function() {
    $scope.options.minDate = $scope.options.minDate ? null : new Date();
  };

  $scope.toggleMin();

  $scope.setDate = function(year, month, day) {
    $scope.dt = new Date(year, month, day);
  };

  var tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  var afterTomorrow = new Date(tomorrow);
  afterTomorrow.setDate(tomorrow.getDate() + 1);
  $scope.events = [
    {
      date: tomorrow,
      status: 'full'
    },
    {
      date: afterTomorrow,
      status: 'partially'
    }
  ];

  function getDayClass(data) {
    var date = data.date,
      mode = data.mode;
    if (mode === 'day') {
      var dayToCheck = new Date(date).setHours(0,0,0,0);

      for (var i = 0; i < $scope.events.length; i++) {
        var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);

        if (dayToCheck === currentDay) {
          return $scope.events[i].status;
        }
      }
    }

    return '';
  }
});

Plunker Link：

https://plnkr.co/edit/?p=preview

从上面的plunker它只加载一个月的日历。

附加显示两个月日历的屏幕

使用附带的plunker寻找类似的方法。

Answer 1

numberOfMonths不支持

uib-datepicker属性。

就此而言，最简单的方法可能是放置两个datepicker控件实例，如下例所示：

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
  
  $scope.options = {
  };  

  $scope.startDate= new Date();
  $scope.endDate = new Date($scope.startDate.getFullYear(),  $scope.startDate.getMonth()+1, 1); 
});

.well-sm {
    float: left; 
    width: 310px;
}

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
 <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.1.js"></script>
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div ng-app="ui.bootstrap.demo" ng-controller="DatepickerDemoCtrl">
    <h4>Months range</h4>
    <div>
      <div uib-datepicker ng-model="startDate" class="well well-sm" datepicker-options="options"></div>
      <div uib-datepicker ng-model="endDate" class="well well-sm" datepicker-options="options"></div>
    </div>
    
</div>

我们可以在角度UIB日期选择器中显示多个月

1 个答案: