如何在Angular 5中使用Ngx-bootstrap BsDatePicker禁用周末（周六、周日）

刚好我之前处理过类似的需求，用Ngx-bootstrap的BsDatePicker禁用周末其实很简单，核心是利用它提供的dateDisabled输入属性，具体步骤如下：

1. 在模板中绑定禁用规则 #

在你的日期选择器输入框上，添加[dateDisabled]属性，绑定到组件中定义的禁用判断方法：

<input type="text" bsDatepicker [dateDisabled]="disableWeekends" placeholder="选择日期">

2. 在组件类中实现禁用判断方法 #

在对应的组件TS文件里，定义disableWeekends方法，通过Date.getDay()判断日期是否为周六或周日（JavaScript中getDay()返回0表示周日，6表示周六），返回true就会禁用该日期：

import { Component } from '@angular/core';
// 如需配置日期选择器样式、格式等，可导入BsDatepickerConfig
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 可选：自定义日期选择器配置（比如设置日期格式）
  bsConfig: Partial<BsDatepickerConfig> = {
    dateInputFormat: 'YYYY-MM-DD'
  };

  disableWeekends(date: Date): boolean {
    const dayOfWeek = date.getDay();
    // 禁用周日(0)和周六(6)
    return dayOfWeek === 0 || dayOfWeek === 6;
  }
}

补充说明 #

• 这个disableWeekends方法会在日期选择器渲染每一个日期时被调用，返回true的日期会被标记为禁用状态，无法被选中。
• 确保你的Ngx-bootstrap版本和Angular 5兼容，一般Ngx-bootstrap 2.x系列适配Angular 5，版本过低可能会缺少dateDisabled属性，可以检查一下依赖版本。

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