在 Angular 2 中禁用 Kendo UI Datepicker 的特定日期答案

【问题标题】：Disabling specific dates for Kendo UI Datepicker in Angular 2在 Angular 2 中禁用 Kendo UI Datepicker 的特定日期
【发布时间】：2018-07-11 07:04:00
【问题描述】：

有没有办法在 Kendo UI 的 Datepicker 组件中禁用特定日期？我知道当前的 API 不支持它，但有人知道解决这个问题的方法吗？

【问题讨论】：

标签： angular kendo-ui kendo-ui-angular2

【解决方案1】：

可以通过可视化和阻止选择这些日期来“伪造”禁用日期。

第 1 步 - 可视化禁用日期

使用kendoCalendarMonthCellTemplate 指令设置禁用日期的样式。例如通过disabled 类

<kendo-datepicker>
    <ng-template kendoCalendarMonthCellTemplate let-date>
        <span [class.disabled]="isDateDisabled(date)">
            {{ date.getDate() }}
        </span>
    </ng-template>
</kendo-datepicker>

第 2 步 - 防止选择禁用日期

如果所选日期被禁用，则在valueChange 事件中设置上一个所选日期。

onValueChange(newDate: Date) {
    if (this.isDateDisabled(newDate)) {
        this.date = this.lastDate;
    } else {
        this.date = newDate;
        this.lastDate = newDate;
    }
}

我创建了一个example，展示了这种方法的实际应用。

在提供的示例中，我还添加了一些调整。（例如：如果所选日期被禁用，则不要关闭日历）

【讨论】：

您好，感谢您抽出宝贵时间回答我的问题。我最近刚收到来自 Kendo UI 团队的回复，回答了我的同样问题，我也会在这里发布。

【解决方案2】：

Kendo UI 团队对我的问题的回应：

日期选择器

<kendo-datepicker (open)="onOpen()"></kendo-datepicker>

功能

onOpen(e){
    setTimeout(()=>{
      document.querySelector('.k-widget.k-calendar.k-calendar-infinite .k-calendar-view .k-content.k-scrollable').addEventListener('scroll', () => {
        this.disableDates()
      })

      this.disableDates()

   })
}

public disableDates(){
      Array.from(document.querySelectorAll('tbody tr td')).forEach(td => {
        if(td.getAttribute('title') == 'Wednesday, July 4, 2018'){
          td.classList.add('disabled')
        }
      })
  }

CSS

.disabled{
     pointer-events: none;
     opacity: 0.5;
}

Plunker： https://plnkr.co/edit/f32f4pKDf4zwVyshZdfJ?p=preview

【讨论】：