如何在Angular 6.0+日历周视图中禁用当前日期之前的所有日期

嘿，我之前帮不少开发者解决过Angular日历的日期禁用问题，针对你需要在Angular 6.0+的周视图里禁用当前日期之前所有过往日期的需求，这里有一套实用的实现方案，咱们一步步来：

1. 基础配置（若未完成） #

如果你还没安装angular-calendar核心依赖，先执行以下命令完成安装：

npm install angular-calendar date-fns --save

确保你已经在模块中导入了CalendarModule和相关依赖模块，这是组件正常运行的前提。

2. 编写日期判断函数 #

在你的组件类中，定义一个用于识别过往日期的函数，这个函数会被日历组件调用，判断某一天是否需要禁用：

import { Component } from '@angular/core';

@Component({
  selector: 'app-calendar-week',
  templateUrl: './calendar-week.component.html',
  styleUrls: ['./calendar-week.component.css']
})
export class CalendarWeekComponent {
  viewDate: Date = new Date(); // 默认显示当前日期所在周
  events: any[] = []; // 你的日历事件数据

  // 判断是否为过往日期
  isPastDate(date: Date): boolean {
    // 仅比较年月日，忽略时间部分
    const today = new Date();
    const currentDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
    const targetDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
    
    // 目标日期早于今天则返回true，表示禁用
    return targetDate < currentDate;
  }
}

这里特意去掉了时间部分的比较，确保当天的日期不会被误禁用——毕竟咱们要禁用的是过往日期，当天是可以正常交互的。

3. 模板中绑定禁用逻辑 #

在周视图的模板代码里，把刚才写的isPastDate函数绑定到日历组件的dayDisabled输入属性上：

<mwl-calendar-week-view
  [viewDate]="viewDate"
  [events]="events"
  [dayDisabled]="isPastDate"
></mwl-calendar-week-view>

angular-calendar的周视图组件会自动遍历每一天，调用这个函数来决定是否禁用该日期。

4. 给禁用日期添加视觉样式 #

为了让用户更直观地识别禁用日期，咱们可以通过CSS添加样式：

/* 禁用日期的背景与光标样式 */
.calendar-week-view .cal-day-disabled {
  background-color: #f0f0f0;
  cursor: not-allowed;
  opacity: 0.7;
}

/* 可选：禁用日期上的文字样式 */
.calendar-week-view .cal-day-disabled .cal-day-number {
  color: #999;
}

这样禁用的过往日期会呈现浅灰色，鼠标移上去显示禁止光标，用户体验更好。

额外提示 #

如果你的日历默认加载的是过往周，记得把viewDate初始化为当前日期（就像上面组件代码里那样），这样用户打开页面时默认看到的是当前周，避免一开始就全是禁用日期的尴尬。

如果你用的是自定义日历组件而非angular-calendar，核心逻辑也是相通的：通过日期比较判断是否为过往日期，再利用组件提供的禁用属性/事件来控制交互和样式。

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