Ionic 3 DateTime组件如何禁用未来的周六和周日

你的需求完全可以实现，Ionic的ion-datetime组件提供了filter属性，让我们可以自定义过滤规则来禁用特定日期。下面是针对你需求的完整实现步骤：

步骤1：在组件类中定义日期过滤函数 #

在你的页面TS文件里，添加一个过滤函数，用来判断日期是否为未来的周六或周日，如果是则返回false（禁用该日期），否则返回true（允许选择）：

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

@Component({
  selector: 'app-your-page',
  templateUrl: './your-page.page.html',
  styleUrls: ['./your-page.page.scss'],
})
export class YourPagePage {
  // 日期过滤函数
  dateFilter = (date: Date): boolean => {
    const today = new Date();
    // 先判断是否是未来日期（只禁用未来的周末，过去的周末依然可选）
    const isFutureDate = date > today;
    if (!isFutureDate) {
      return true; // 过去的日期都允许选择
    }
    // 获取星期几：0=周日，6=周六
    const dayOfWeek = date.getDay();
    // 如果是未来的周六或周日，返回false禁用
    return dayOfWeek !== 0 && dayOfWeek !== 6;
  };
}

步骤2：在HTML中绑定过滤函数到ion-datetime #

修改你的ion-datetime标签，添加filter属性绑定到上面定义的函数：

<ion-item>
  <ion-label>Select Date</ion-label>
  <ion-datetime 
    displayFormat="MMM DD YYYY" 
    min="2018-03-26" 
    max="2020-10-31"
    [filter]="dateFilter">
  </ion-datetime>
</ion-item>

代码说明 #

• filter函数会对每个可选日期执行判断逻辑，返回true表示该日期可选择，false则禁用。
• 我们先判断日期是否在今天之后，只有未来的日期才需要检查是否是周末，过去的周末依然保持可选状态（如果不需要过去的周末，也可以去掉这个判断，直接检查星期几）。
• 星期几的判断：getDay()方法返回0（周日）到6（周六）的数字，所以我们排除这两个值对应的日期。

这样设置后，你的日期选择器就会自动禁用所有未来的周六和周日啦！

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