Angular Bootstrap Datepicker - 禁用除指定列表之外的所有日期

Question

我已经在这个问题上停留了几天了，我在网上找不到任何合适的例子来提供帮助。我正在从休息服务中获取日期列表，我需要在要选择的 angular 日期选择器中提供这些日期。当我有这个列表时，我需要禁用日期选择器中的所有其他日期。这是我当前的代码示例来展示这一点 -

这是一个笨蛋 - https://plnkr.co/edit/8zncfr2VBayaO7wRFV4C?p=preview

HTML 片段---

<div role="tabpanel" class="tab-pane" id="calender">
    <h3 class="map_tab_title"> Select Days </h3>
    <div uib-datepicker ng-model="date_pick" datepicker-options="options" date-disabled="disabled(data)">
    </div>
    <button type="submit" class="btn book_now_btn" ng-click="goToBookPage()">final step <span> input your information </span>    
    </button>
</div>

ANGULAR 片段 -

$scope.dates = response.data.outgoing.dates;
$scope.date_pick = Date.parse($scope.dates[0]);

$scope.today = function(){
    $scope.date_pick = new Date();
};
$scope.today();
$scope.options = {
    minDate: new Date(),
    showWeeks: false
};

function areDatesEqual(date1, date2) {
    return date1 == date2;
}
$scope.disabled = function(data) {
    console.log("TRIGGERED");
    var date = data.date,
        mode = data.mode;
    var isRealDate = false;
    for (var i = 0; i < $scope.dates.length; i++) {
        if (areDatesEqual($scope.dates[i], date)) {
            isRealDate = true;
        }
    }                
    return (mode === 'day' && isRealDate);
};

有人可以帮我解决这个问题吗？我很茫然。提前致谢！

Answer 1

看来你弄错了。 dateDisable 是一个日期选择器选项，您可以实现 dateDisable 的功能。

根据您的script.js

，这里稍作改动

angular.module('plunker', ['ui.bootstrap', 'ngAnimate'])
.controller("MainController", ["$scope", function($scope) {
  $scope.dates = ["9/26/2016", "9/28/2016", "9/29/2016"];
  $scope.date_pick = Date.parse($scope.dates[0]);

  $scope.today = function() {
    $scope.date_pick = new Date();
  };
  $scope.today();
  function areDatesEqual(date1, date2) {
    return date1 == date2.toLocaleDateString()
  }

  // *******we don't need this code*******//
  $scope.disable = function(data) {
    var date = data.date, mode= data.mode;
    var isRealDate = false;
    for (var i = 0; i < $scope.dates.length; i++) {
      if (areDatesEqual($scope.dates[i], date)) {
        isRealDate = true;
      }
    }
    return (mode === 'day' && isRealDate);
  };
  //**************//

  $scope.options = {
    minDate: new Date(),
    showWeeks: false,
    //**********************************
    //// Here's changed part - add new option dateDisabled
    dateDisabled:function(data) {
      console.log("here")
      var date = data.date, mode= data.mode;
      var isRealDate = false;
      for (var i = 0; i < $scope.dates.length; i++) {
        if (areDatesEqual($scope.dates[i], date)) {
          isRealDate = true;
        }
      }
      return (mode === 'day' && isRealDate);
    }
  };
}]);

以及 HTML 代码中的变化

<div uib-datepicker ng-model="date_pick" datepicker-options="options">

Answer 2

感谢汉斯的回答 - 这是最终对我有用的 -

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

HTML 片段 --

<div ng-controller="MainController">
    <h3> Select Days </h3>
    <div uib-datepicker ng-model="date_pick" datepicker-options="options">  
   </div>
</div>

ANGULAR 片段 --

$scope.dates = ["2016-09-26", "2016-09-28", "2016-09-29"];
$scope.date_pick = Date.parse($scope.dates[0]);

$scope.today = function() {
  $scope.date_pick = new Date();
};
$scope.today();

$scope.options = {
  dateDisabled: disabledTest,
  showWeeks: false
};

var dayDuration = 60 * 60 * 24 * 1000;

function areDatesEqual(date1, date2) {
  return (parseInt(date1 / dayDuration)) == (parseInt(date2 / dayDuration));
}

function disabledTest(data) {
  var date = data.date,
    mode = data.mode;

  var isRealDate = false;
  for (var i = 0; i < $scope.dates.length; i++) {
    var changedDate = Date.parse($scope.dates[i]);
    if (areDatesEqual(changedDate, date)) {
      isRealDate = true;
    }
  }
  return mode === 'day' && !isRealDate; // && (date >= $scope.endDate);
}

Answer 3

我知道这是一个老问题，但我最近一直在努力解决这个问题，我想分享我的工作 plunker，我认为这是一个更清晰的解决方案：

http://embed.plnkr.co/pf5Kw2/

Angular Bootstrap Datepicker - 禁用除指定列表之外的所有日期

Angular Bootstrap Datepicker - Disable all dates except a specified list

datepicker

angularjs

angular-ui

angular-ui-bootstrap