Angular 2 自定义Date Picker日期选择器如何禁用指定日期

你使用的ng2-bootstrap（现更名为ngx-bootstrap）日期选择器原生支持自定义禁用日期逻辑，按以下步骤修改即可：

• 第一步：预处理禁用日期，统一转为moment格式存储
  在组件中新增变量存储格式化后的禁用日期列表，在ngOnInit中完成转换：

// 组件类新增属性
private disabledDateList: moment.Moment[] = [];

ngOnInit() {
  if (this.disabledDates) {
    const splits = this.disabledDates.toString().split(";");
    // 所有禁用日期统一转为moment格式，精度对齐到天
    this.disabledDateList = splits.map(dateStr => {
      return moment(dateStr.trim(), this.dateFormat).startOf('day');
    });
  }
  // 给内置的DatePickerComponent绑定禁用判断逻辑
  this.datePickerCmp.dateDisabled = this.checkDateDisabled;
}

• 第二步：实现日期禁用判断函数
  新增函数判断当前渲染的日期是否属于禁用列表：

private checkDateDisabled = (renderDate: Date): boolean => {
  // 没有禁用日期直接返回可选择
  if (this.disabledDateList.length === 0 || !renderDate) {
    return false;
  }
  const currentRenderDate = moment(renderDate).startOf('day');
  // 匹配到禁用日期返回true（表示禁用该日期）
  return this.disabledDateList.some(disabledItem => {
    return disabledItem.isSame(currentRenderDate);
  });
}

• 第三步：补充表单校验逻辑（可选，推荐）
  避免用户手动在输入框中输入禁用日期，给表单控件新增自定义校验规则，在constructor中添加：

constructor(/* 保持你原有注入参数不变 */) {
  // 原有初始化逻辑保留，新增以下校验逻辑
  this.datepickerFormControl.addValidators((control) => {
    if (!control.value) return null;
    // 格式错误直接返回原有错误即可
    if (!this.dateFormatter.isValid(control.value, this.dateFormat)) {
      return { invalidDate: true };
    }
    const inputDate = moment(control.value, this.dateFormat).startOf('day');
    // 输入日期属于禁用列表返回校验错误
    return this.disabledDateList.some(disabledItem => disabledItem.isSame(inputDate)) 
      ? { disabledDate: true } 
      : null;
  });
}

• 第四步：自定义灰化样式（可选）
  如果需要调整禁用日期的显示效果，可以添加自定义CSS：

/* 适配ng2-bootstrap日期选择器禁用日期样式 */
bs-datepicker-container td.disabled,
bs-datepicker-inline td.disabled {
  background: #f5f5f5;
  color: #999;
  cursor: not-allowed;
  pointer-events: none;
}

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