嗨我正在使用Kendo Angular UI 的 Kendo 日期选择器。我使用日期选择器的 min 和 max 属性来限制用户从特定的日期范围中进行选择。但这完全隐藏了超出范围的日期,就像这样。
相反,我想将它们显示为禁用状态,就像 2 月 29 日被禁用一样。再次,这已被禁用剑道的这个API
这里最好的情况是使用 min 和 max,因为它提供内置验证,但是当我们无法从外部 CSS 控制它们时,因为 DOM 元素本身不会生成任何日期,而是显示以下标签
<td class="k-empty"> </td>
这是我在 HTML 中所做的
<kendo-datepicker [id]="getId('startDate')"
[formatPlaceholder]="{ year: 'YYYY', month: 'MM', day: 'DD' }"
[navigation]="false" [min]="minimumDate"
(open)="onDatePickerOpen()" formControlName="startDate"></kendo-datepicker>
这里 Open Datepicker 函数根据业务逻辑禁用了一些日期,例如 2 月 29 日被禁用。
如何在仍然遵循最小-最大日期范围 API 的同时实现这种禁用的外观?
min
and max
属性隐藏超出范围的日期,因此要禁用您可以使用disabledDates的指令kendo-datepicker
<kendo-datepicker
[(ngModel)]="value"
[disabledDates]="disabledDates"
>
</kendo-datepicker>
TS:
public disabledDates = (date: Date): boolean => {
return date < this.minimumDate;
}
工作演示链接
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)