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

Question

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

Answer 1

可以通过可视化和阻止选择这些日期来 "fake" 禁用日期。

第 1 步 - 可视化禁用日期

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

<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 来展示这种方法的实际应用。

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

Answer 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;
}

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

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

Disabling specific dates for Kendo UI Datepicker in Angular 2

kendo-ui

kendo-ui-angular2

angular

第 1 步 - 可视化禁用日期

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