如何在AngularJS中通过uib-datepicker-popup按地点禁用不可用日期？

uib-datepicker-popup（来自UI Bootstrap）正好提供了date-disabled属性来实现这种基于条件的日期禁用逻辑，完全能满足你根据所选地点过滤可用日期的需求。下面是具体的实现步骤和代码示例：

核心思路 #

利用date-disabled绑定一个自定义判断函数，该函数会针对日期选择器中的每个日期，根据当前选中的地点来决定是否禁用该日期。

1. 控制器层准备数据与判断逻辑 #

首先在AngularJS控制器中定义各地点对应的可用日期，以及切换地点时的日期禁用判断函数：

angular.module('myApp', ['ui.bootstrap'])
.controller('DatePickerCtrl', function($scope) {
  // 定义各地点的可用日期（注意：月份是0-based，4月对应数字3）
  $scope.locationAvailableDates = {
    'DC': [
      new Date(2024, 3, 13),
      new Date(2024, 3, 20),
      new Date(2024, 3, 25),
      new Date(2024, 3, 31)
    ],
    // 可以扩展其他地点的日期
    'NY': [
      new Date(2024, 3, 10),
      new Date(2024, 3, 17)
    ]
  };

  // 默认选中DC地点
  $scope.selectedLocation = 'DC';
  // 控制日期选择器的展开状态
  $scope.datePickerOpened = false;

  // 日期禁用判断函数
  $scope.isDateDisabled = function(date, mode) {
    // 仅对"天"级别的日期进行判断，忽略年月视图的禁用
    if (mode !== 'day') {
      return false;
    }

    // 获取当前选中地点的可用日期列表
    const availableDates = $scope.locationAvailableDates[$scope.selectedLocation] || [];
    
    // 对比日期的年月日（忽略时间部分，避免精度问题）
    const isDateAvailable = availableDates.some(availableDate => {
      return availableDate.getFullYear() === date.getFullYear() &&
             availableDate.getMonth() === date.getMonth() &&
             availableDate.getDate() === date.getDate();
    });

    // 不在可用列表中的日期返回true（禁用）
    return !isDateAvailable;
  };
});

2. 视图层绑定组件与逻辑 #

在HTML中绑定地点选择器和日期选择器，将date-disabled指向我们定义的判断函数：

<div ng-app="myApp" ng-controller="DatePickerCtrl">
  <div>
    <label>选择地点：</label>
    <select ng-model="selectedLocation" class="mr-3">
      <option value="DC">DC</option>
      <option value="NY">NY</option>
    </select>
  </div>

  <div class="mt-3">
    <label>选择可用日期：</label>
    <input type="text"
           uib-datepicker-popup="MM/dd/yyyy"
           ng-model="selectedDate"
           is-open="datePickerOpened"
           date-disabled="isDateDisabled(date, mode)"
           ng-click="datePickerOpened = true"
           close-text="关闭"
           class="ml-2" />
  </div>
</div>

关键细节说明 #

• 当用户切换地点时，selectedLocation的变化会自动触发isDateDisabled函数重新计算每个日期的禁用状态，无需额外手动刷新。
• 日期比较时只校验年月日，避免因Date对象的时间部分（时分秒）导致的判断错误。
• 如果你的可用日期是从后端接口获取的，只需在接口返回后更新locationAvailableDates对象即可，逻辑会自动生效。

内容的提问来源于stack exchange，提问作者Dave