Question

是否可以在Kendo UI的Datepicker组件中禁用特定日期？我知道当前的API不支持它，但是有人知道可以解决此问题吗？

Answer 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来展示这种方法的实际效果。

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

Answer 2

Kendo UI团队对我的问题的答复：

日期选择器

if (dict.ContainsKey(ID))

功能

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

CSS

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')
        }
      })
  }

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

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

2 个答案:

步骤1-可视化禁用日期

步骤2-禁止选择禁用日期