如何在Angular UI Bootstrap Datepicker 2.5.0中禁用特定日期

嘿，我刚好熟悉这个版本的Datepicker，要禁用每月29日和30日其实很简单，咱们直接上实操方案：

步骤1：在控制器中定义日期禁用逻辑 #

首先，在你的Angular控制器里，创建一个包含dateDisabled方法的配置对象，这个方法会告诉Datepicker哪些日期需要禁用：

angular.module('yourApp', ['ui.bootstrap'])
  .controller('DatepickerCtrl', function($scope) {
    // 初始化选中日期（可选）
    $scope.dt = new Date();
    
    // Datepicker配置项
    $scope.dateOptions = {
      dateDisabled: function(data) {
        var targetDate = data.date;
        var currentMode = data.mode;
        
        // 仅在「日选择」模式下生效，避免干扰年月选择
        return currentMode === 'day' && (targetDate.getDate() === 29 || targetDate.getDate() === 30);
      }
    };

    // 日历弹窗控制（如果用popup模式的话）
    $scope.popup1 = {
      opened: false
    };
    
    $scope.openCalendar = function() {
      $scope.popup1.opened = true;
    };
  });

步骤2：在HTML中绑定配置项 #

接下来，把这个配置对象绑定到你的Datepicker组件上，不管是inline模式还是popup模式都适用：

<!-- Popup模式的Datepicker -->
<div ng-controller="DatepickerCtrl">
  <p class="input-group">
    <input type="text" 
           class="form-control" 
           uib-datepicker-popup 
           ng-model="dt" 
           is-open="popup1.opened" 
           datepicker-options="dateOptions"
           ng-click="openCalendar()" />
  </p>

  <!-- 或者Inline模式的Datepicker -->
  <uib-datepicker ng-model="dt" datepicker-options="dateOptions"></uib-datepicker>
</div>

关键说明 #

• dateDisabled方法接收的data参数包含两个核心属性：
  • date：当前要检查的Date对象，我们通过getDate()获取日期的日部分
  • mode：当前Datepicker的选择模式（day/month/year），加上mode === 'day'的判断是为了不让禁用逻辑影响年月的选择操作
• 确保你的Angular应用已经正确引入了ui.bootstrap模块，这是Datepicker组件的依赖基础

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