Kendo UI for Angular：Kendo UI Datepicker 禁用输入/仅文本框部分

Posted 2023-05-07

【中文标题】Kendo UI for Angular：Kendo UI Datepicker 禁用输入/仅文本框部分

【英文标题】：Kendo UI for Angular: Kendo UI Datepicker disable typing/ only textbox section

【发布时间】：2020-06-18 22:27:20

【问题描述】：

我正在尝试实现一个 Kendo UI Datepicker。日期值只能通过其按钮并从弹出窗口中选择日期来更改。如何防止用户在 Datepicker 文本框中输入内容？我可以在不禁用整个控件的情况下禁用文本框吗？

【问题讨论】：

这能回答你的问题吗？ Kendo UI Datepicker disable typing

@Giannis，那是 jQuery，我们如何在 Angular 中实现？

同样的使用方式：

我试过但没有工作。我可以更改文本框的值。我想禁用文本框

请看这里：stackblitz.com/edit/angular-rzcsdw?file=app/app.component.ts这就是你真正想要实现的目标吗？

【参考方案1】：

正如我在 cmets 中已经提到的，您可以阻止用户仅使用 onkeydown="return false;" 在 Datepicker 文本框中输入内容。在这种情况下，用户仍然可以使用鼠标和/或箭头。

如果您确实想禁用控件的Datepicker 文本框“部分”，则必须以编程方式执行此操作，因为 [disabled]="true" 属性将禁用整个控件。

关键点如下：

html

<kendo-datepicker #datepicker [value]="value"></kendo-datepicker>

ts

this.datepickerRef.element.nativeElement.children[0].children[0].setAttribute('disabled', true);

我准备了一个演示。请看这里： https://stackblitz.com/edit/angular-rzcsdw?file=app/app.component.ts 让我知道这是否是所需的功能。

【参考方案2】：

我晚了几年，但有一个指令可以用于此，readOnlyInput：

<kendo-datepicker [readOnlyInput]="true" [value]="value">

https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/readonly-state/