「干货」揭秘界面控件Kendo UI for Angular中新的日期增强功能！-控件新闻-慧都网

「干货」揭秘界面控件Kendo UI for Angular中新的日期增强功能！

翻译|行业资讯|编辑：龚雪|2024-02-23 11:26:27.777|阅读 24 次

概述：本文将为大家介绍界面控件Kendo UI for Angular中增强的日期输入功能，欢迎下载最新版组件体验！

Kendo UI for Angular是专用于Angular开发的专业级Angular组件。telerik致力于提供纯粹的高性能Angular UI组件，无需任何jQuery依赖关系。在本文中，我们将带大家了解Kendo UI for Angular的Date Input组件中有什么新功能，新功能可以帮助您提升应用程序并为用户提供增强的日期输入体验。

在最新的版本中，Kendo UI for Angular中的DateInput、DatePicker、DateTimePicker和TimePicker都得到了一组新的增强，它们可以很好地集成在一起。

Kendo UI R3 2023 SP1新版下载

改进日期输入之间的复制和粘贴

开箱即用，在日期输入字段之间复制和粘贴日期变得轻而易举，您可以获得更好的无缝用户体验，最重要的是，可以节省很多时间。

Auto-Tab操作

在日期段(例如，日、月、年、小时等)之间切换，使用新的autoSwitchParts选项变得更加舒适。现在Kendo UI for Angular DateInput 组件在输入时，开发者可以决定交代你是否应该自动从一个片段移动到另一个片段。

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<div>
<p>Select a date:</p>
<kendo-dateinput
[autoSwitchParts]="false"
[value]="value">
</kendo-dateinput>
</div> `
export class AppComponent {
public value: Date = new Date(2000, 2, 10);
}

可自定义Auto-Switch键

Date Inputs不仅允许您定义自动选项卡操作，还可以定义按下那个键将自动切换到下一个片段。为autoSwitchKeys提供自定义集合，并更好地控制日期输入的交互。您可以设置任何键盘键来触发切换，例如, |, &, ;。

通过定义自己的切换键来增强上面的自动选项卡操作示例：

<kendo-dateinput
[autoSwitchKeys]="autoSwitchKeys"
...
></kendo-dateinput>
…
public autoSwitchKeys = ["-", ";", "+"];

禁用鼠标滚轮更改

在某些情况下，您可能希望阻止用户使用鼠标滚轮更改日期值，不再有可能破坏数据准确性的意外日期更改，这个简单而有效的选项来自于rescue-enableMouseWheel !

import { Component } from "@angular/core";

@Component({
selector: "my-app",
template: `
<div>
<p>Select a date:</p>
<kendo-dateinput
[enableMouseWheel]="false"
[value]="value"
></kendo-dateinput>
</div>
`,
})
export class AppComponent {
public value: Date = new Date(2000, 2, 10);
}