Kendo UI for Angular是專用于Angular開發(fā)的專業(yè)級Angular組件。telerik致力于提供純粹的高性能Angular UI組件，無需任何jQuery依賴關系。在本文中，我們將帶大家了解Kendo UI for Angular的Date Input組件中有什么新功能，新功能可以幫助您提升應用程序并為用戶提供增強的日期輸入體驗。

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

Kendo UI R3 2023 SP1新版下載

改進日期輸入之間的復制和粘貼

開箱即用，在日期輸入字段之間復制和粘貼日期變得輕而易舉，您可以獲得更好的無縫用戶體驗，最重要的是，可以節(jié)省很多時間。

Auto-Tab操作

在日期段(例如，日、月、年、小時等)之間切換，使用新的autoSwitchParts選項變得更加舒適。現(xiàn)在Kendo UI for Angular DateInput 組件在輸入時，開發(fā)者可以決定交代你是否應該自動從一個片段移動到另一個片段。

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提供自定義集合，并更好地控制日期輸入的交互。您可以設置任何鍵盤鍵來觸發(fā)切換，例如, |, &, ;。

通過定義自己的切換鍵來增強上面的自動選項卡操作示例：

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

禁用鼠標滾輪更改

在某些情況下，您可能希望阻止用戶使用鼠標滾輪更改日期值，不再有可能破壞數(shù)據(jù)準確性的意外日期更改，這個簡單而有效的選項來自于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);
}

插入符號模式

插入符號模式特性通過使光標的位置可見，提供了另一種數(shù)據(jù)輸入體驗。將allowCaretMode選項設置為true將在DateInput中顯示一個閃爍的插入符號，無論是當日期段部分完成時，還是當autoSwitchParts為false時。

自動填充

在日期編輯中，自動填充是非常重要的功能。當啟用時，組件失去焦點將自動填充日期的缺失部分。

例如，如果用戶只輸入日期的日、月或年部分，然后在輸入字段外單擊，則組件將自動將缺少的部分補全到當前日期。

這一增強承諾將顯著加快數(shù)據(jù)輸入速度，并為用戶節(jié)省大量時間！

總而言之，全新的Kendo UI for Angular Date Input 組件將日期編輯提升到了一個新的水平！

Telerik_KendoUI產(chǎn)品技術交流群：726377843    歡迎一起進群討論