Angular UI 日期选择器。从今天起仅启用 5 天，不包括周末答案

【问题标题】：Angular UI Datepicker. Enable only 5 days from today excluding weekendsAngular UI 日期选择器。从今天起仅启用 5 天，不包括周末
【发布时间】：2016-05-24 22:07:56
【问题描述】：

我在我的项目中使用 Angular UI Bootstrap datepicker 指令。我有这个特定的需求，比如我只需要从当天开始启用 5 天。如果是周末，我需要禁用它们并启用剩余的日子。例如，如果今天是星期五，我需要启用 fri, mon, tue, web, thurs。我正在使用 dateDisabled 属性来实现这一点。问题是所有过去一个月的日期也都被启用了。另外我认为我提出的解决方案并不优雅。下面是我的标记和代码。请帮助我。提前谢谢你。

 <input show-weeks="false" ng-click="vm.openDate()" name="quotedate" type="text" class="form-control" ng-model-options="{timezone:'UTC'}" uib-datepicker-popup="dd/MM/yyyy" ng-model="vm.quote.date" is-open="vm.quotedate.opened" datepicker-options="vm.dateOptions" required close-text="Close" readonly="true"/> 

vm.dateOptions = {
     dateDisabled: disabled,
     minDate: today            
};

function disabled(data) {
        var date = data.date,
            mode = data.mode;
        if (today.getDay() === 0 || today.getDay() === 6) {
            return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6 || date.getDate() > today.getDate() + 5 );
        }else if (today.getDay() === 1) {
            return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6 || date.getDate() > today.getDate() + 4 );
        }else {
            return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6 || date.getDate() > today.getDate() + 6 );
        }
}

【问题讨论】：

标签： datepicker angular-ui-bootstrap angular-ui-datepicker

【解决方案1】：

您要查找的是min-date、max-date 和date-disabled 属性，as described in the docs。本例中的date-disabled 函数是直接从文档中提取的，为了限制可用的日期范围，只需将min-date 属性设置为当前日期时间：

vm.dt = new Date();
vm.minDate = angular.copy(vm.dt);

...和max-date 从现在起五天后：

var fiveDaysFromNow = angular.copy(vm.dt);
fiveDaysFromNow.setDate(fiveDaysFromNow.getDate() + 5);
vm.maxDate = fiveDaysFromNow;

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

  vm.openDatePopup = function() {
    vm.opened = true;
  };

  // Disable weekend selection
  vm.disabled = function(date, mode) {
    return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
  };
  
  vm.minDate = angular.copy(vm.dt);
  
  var fiveWeekdaysFromNow = angular.copy(vm.dt);
  fiveWeekdaysFromNow.setDate(fiveWeekdaysFromNow.getDate() + 7);
  vm.maxDate = fiveWeekdaysFromNow;

  vm.dateOptions = {
    formatYear: 'yy',
    startingDay: 0
  };

  vm.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  vm.format = vm.formats[0];

});

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

    <style>
      .full button span {
        background-color: limegreen;
        border-radius: 32px;
        color: black;
      }
      .partially button span {
        background-color: orange;
        border-radius: 32px;
        color: black;
      }
    </style>
    <div ng-controller="DatepickerDemoCtrl as demo">
      <div class="row">
        <div class="col-xs-8 col-xs-offset-2">
          <p class="input-group">
            <input type="text" 
                   class="form-control" 
                   uib-datepicker-popup="{{demo.format}}" 
                   ng-model="demo.dt" 
                   show-weeks="false"
                   is-open="demo.opened" 
                   min-date="demo.minDate" 
                   max-date="demo.maxDate" 
                   datepicker-options="demo.dateOptions" 
                   date-disabled="demo.disabled(date, mode)" 
                   ng-required="true" 
                   close-text="Close"/>
            <span class="input-group-btn">
              <button type="button" 
                      class="btn btn-default" 
                      ng-click="demo.openDatePopup()">
                <i class="glyphicon glyphicon-calendar"></i>
              </button>
            </span>
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

希望这可以帮助！

【讨论】：

您好，感谢您的回答。这会禁用周末，但也会将它们计算在内。这就是我最终提出 if else 条件的原因。
如果您只想提前五个工作日，那么您为什么不禁用周末并添加 7 天而不是 5 天（或者添加 6 天，如果您想要总共 5 个可用天，包括今天） .无论是哪一天，您都只能选择接下来的五个工作日。我相应地更新了示例。