Question

我已经被困在这个问题上几天了，我找不到合适的在线示例来帮助你。我从一个休息服务中获取一个日期列表，我需要在要选择的角度日期选择器中提供这些日期。当我有这个列表时，我需要禁用datepicker中的每个其他日期。以下是我目前的代码示例 -

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

HTML SNIPPET ---

parentModel

ANGULAR SNIPPET -

<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>

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

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

感谢Hans的回答 - 这最终对我有用 -

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

HTML SNIPPET -

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

ANGULAR SNIPPET -

$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

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

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

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

3 个答案: