Angular中Ngb Date Picker如何根据接口返回JSON动态禁用指定日历日期

解决方案 #

你只需要把接口返回的日期字符串转换为NgbDateStruct结构，原有禁用逻辑不需要做大幅调整，具体修改如下：

1. 改造loadHolidayDates方法

在接口请求的回调中把返回的日期数组转成符合要求的格式：

loadHolidayDates(code) {
  console.log(code);
  this.scheduleCheckInService.getHolidays(code).subscribe(data => {
    // 拆分YYYY-MM-DD格式的日期字符串，生成NgbDateStruct数组
    this.disabledDates = data.map(item => {
      const [year, month, day] = item.holidayDate.split('-').map(Number);
      return { year, month, day };
    });
  });
}

2. （可选）优化禁用判断逻辑

原有判断逻辑每次都要实例化NgbDate对象，可以直接比对字段提升性能：

isDisabled = (date: NgbDateStruct, current: { month: number, year: number }) => {
  return this.disabledDates.some(disabledItem => 
    disabledItem.year === date.year &&
    disabledItem.month === date.month &&
    disabledItem.day === date.day
  );
}

逻辑说明 #

你原有逻辑的核心是依赖NgbDateStruct类型的数组匹配禁用日期，接口返回的是标准YYYY-MM-DD格式的字符串，拆分后得到的年、月、日数字刚好匹配NgbDateStruct的结构要求，且Ngb Date Picker的月份采用1-12的计数规则，和日期字符串中的月份数值完全一致，不需要做额外偏移。

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