时间戳

首页 > 解决方案 > Datepicker 不会禁用所有不可用的日期

angular - Datepicker 不会禁用所有不可用的日期

问题描述

编辑：我在过滤器中发现了部分问题，如果我打印 console.log（天），当我在 12 月到达时，日期相当于 01/00/2019, 02/00/2019 ... 因为 .get ( 'month') 从索引 0 开始，但我不知道如何修复它

当我检索服务器的不可用日期（一个包含 20 多个日期的大表）时，我设法禁用了第一个日期范围，但不是所有日期。

这是我的服务器示例的响应：

{
"arrayOfUnavailableDates": [
    "2018-12-01",
    "2018-12-02",
    "2018-12-03",
    "2018-12-04",
    "2018-12-05",
    "2018-12-06",
    "2018-12-07",
    "2018-12-08",
    "2018-12-09",
    "2018-12-10",
    "2018-12-11",
    "2018-12-12",
    "2018-12-13",
    "2018-12-14",
    "2018-12-15",
    "2018-12-16",
    "2018-10-05",
    "2018-10-06",
    "2018-10-07",
    "2018-10-08",
    "2018-10-09",
    "2018-10-10"
    ]
}

我得到这个数组的角度

getUnavailableDatesOfCoach(coachId: number): Observable<Date[]> {
const queryParams = `?coachId=${coachId}`;

return this._http
  .get<{ arrayOfUnavailableDates: Date[] }>(
    `${this.apiUrlUnavailableDate}` + queryParams
  )
  .pipe(map(data => data.arrayOfUnavailableDates));
}

这是我的过滤方法：

myFilter = (d: Date): boolean => {
this._route.queryParams.subscribe(params => {
  if (params['coachId']) {
    this._unavailableDateService
      .getUnavailableDatesOfCoach(params['coachId'])
      .subscribe(arrayOfUnavailableDates => {
        this.disableDateList = arrayOfUnavailableDates;
        console.log(this.disableDateList);
      });
  }
});
const dateMoment = moment(d);

let date: any;
let month: any;
// console.log(dateMoment.get('date'));
if (dateMoment.get('date').toString().length < 2) {
  date = '0' + dateMoment.get('date').toString();
} else {
  date = dateMoment.get('date').toString();
}

if (
  dateMoment
    .add(1, 'M')
    .get('month')
    .toString().length < 2
) {
  month =
    '0' +
    dateMoment
      .get('month')
      .toString()
      .toString();
} else {
  month = dateMoment
    .get('month')
    .toString()
    .toString();
}

const day = dateMoment.get('year').toString() + '-' + month + '-' + date;
// console.log(day);
return !this.disableDateList.includes(day);
// tslint:disable-next-line:semicolon
};

日期选择器会停用 10 月 5 日至 10 日的日期，但不会停用 12 月的日期...

在此处输入图像描述

谢谢 ！

标签： angularangular-material

解决方案

试试这样：

使用过滤器禁用日期

 disableDateList: Array<any> = [
    '2018-08-01',
    '2018-08-02',
    '2018-08-03',
    '2018-08-04',
    '2018-08-05',
    '2018-08-06',
    '2018-08-15',
    '2018-08-15',
    '2018-10-15',
    '2018-11-15',
    '2018-12-15',
    '2019-02-15',
    '2019-11-05',
    '2019-12-15'
  ];

  myFilter = (d: Date): boolean => {
    d = new Date(d);

    let date: any;
    let month: any;

    if (d.getDate().toString().length < 2) {
      date = '0' + d.getDate().toString()
    } else {
      date = d.getDate().toString()
    }

    if ((d.getMonth() + 1).toString().length < 2) {
      month = '0' + (d.getMonth() + 1).toString()
    } else {
      month = (d.getMonth() + 1).toString()
    }

    const day = d.getFullYear().toString() + "-" + month + "-" + date;

    return !this.disableDateList.includes(day);
  }

推荐阅读