仅在日期选择器中启用两天并禁用其余日期

时间:2017-08-17 14:50:12

标签: angularjs

我正忙着尝试在日期选择器中启用2天,但我正在努力做到正确。我正在寻求启用本月的第一天和下个月的第一天,其他一切都应该被禁用。

以下是我忙着玩的代码:

angular.module('plunker', ['ui.bootstrap']);
  var DatepickerDemoCtrl = function ($scope, $timeout) {

  $scope.dates = ["2017/08/01","2017/09/01"];

  $scope.date = new Date();

  $scope.minStartDate = 0; //fixed date
  $scope.maxStartDate = Date.parse($scope.dates[0]); //init value
  $scope.minEndDate = Date.parse($scope.dates[0]); //init value
  $scope.maxEndDate = Date.parse($scope.dates[1]); //fixed date 
  $scope.openStart = function() {

  $timeout(function() {
       $scope.startOpened = true;
     });
  };

  $scope.openEnd = function() {
      $timeout(function() {
        $scope.endOpened = true;
     });
  };

 $scope.dateOptions = {
  'year-format': "'yyyy'",
  'starting-day': 1
  };
};

-------------------- HTML ------------------

  <!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="DatepickerDemoCtrl">

    <div class="form-horizontal">
      <h3>Date</h3>
        <p>
            <input type="text" datepicker-popup="{{format}}" ng-model="date" is-open="endOpened" min="minEndDate" max="maxEndDate" datepicker-options="dateOptions" close-text="Close" />
            <button class="btn" ng-click="openEnd()"><i class="icon-calendar"></i></button>
        </p>
    </div>
</div>
  </body>
</html>

0 个答案:

没有答案