Kendo UI致力于新的開(kāi)發(fā)，來(lái)滿足不斷變化的需求。現(xiàn)在我們非常自豪地宣布，通過(guò)React框架的Kendo UI JavaScript封裝來(lái)支持React Javascript框架。KendoReact能夠?yàn)榭蛻籼峁└玫挠脩趔w驗(yàn)，并且能夠更快地構(gòu)建更好的應(yīng)用程序。

理想情況下，日期選擇工具應(yīng)該完全無(wú)摩擦，以至于用戶根本不會(huì)注意到它們的存在。如果用戶主動(dòng)注意到一個(gè)日期范圍選擇工具，那可能是它出了問(wèn)題。好的設(shè)計(jì)都是無(wú)形的，但不能用因?yàn)榭蛻舨豢紤]，我們開(kāi)發(fā)人員也忽視它。

Kendo UI R3 2022正式版下載

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

KendoReact中的DateRangePicker React組件是一種工具，可以快速輕松地選擇一系列日期。它也是一個(gè)高度可定制的組件，提供了出色的用戶體驗(yàn)和出色的開(kāi)發(fā)人員體驗(yàn)，同時(shí)擁有多種自定義外觀和操作選項(xiàng)，包括最小和最大日期、默認(rèn)值、禁用日期等。

功能

Date Range Picker組件的功能非常豐富，它包含了開(kāi)發(fā)人員所期望的功能：驗(yàn)證、默認(rèn)值等……但它還包括高級(jí)功能(例如反向選擇和完整的鍵盤(pán)支持)，這些功能不是在任何組件中都能找到的。

反向日期選擇和日期交換

大多數(shù)情況下，當(dāng)處理日期范圍選擇時(shí)，我們假設(shè)結(jié)束日期將在開(kāi)始日期之后。但有時(shí)候也會(huì)有不同，需要用戶能夠選擇結(jié)束日期在開(kāi)始日期之前的日期。

幸運(yùn)的是，DateRangePicker組件使它變得簡(jiǎn)單！只需將allowReverse屬性設(shè)置為true，就可以開(kāi)始了！除了反向選擇邏輯，還可以呈現(xiàn)一個(gè)按鈕來(lái)交換開(kāi)始日期和結(jié)束日期值，要顯示交換按鈕，將swapButton和allowReverse屬性都設(shè)置為true。這將在日期輸入框之間添加一個(gè)新按鈕，允許用戶快速來(lái)回切換所選的開(kāi)始和結(jié)束日期，只需單擊一下!

自定義和樣式

DateRangePicker(以及所有KendoReact組件)也非常容易自定義樣式。

開(kāi)發(fā)人員可以將以下DateRangePicker組件替換為自定義組件：

• 開(kāi)始和結(jié)束日期輸入，它呈現(xiàn)DateRangePicker的開(kāi)始和結(jié)束范圍選擇的輸入
• 日歷，在DateRangePicker的彈出窗口中呈現(xiàn)MultiViewCalendar
• 彈出窗口，它呈現(xiàn)包含MultiViewCalendar的彈出框

這允許用戶創(chuàng)建一個(gè)真正獨(dú)特和個(gè)性化的用戶體驗(yàn)，此外DateRangePicker還支持完整的主題支持，因此無(wú)論您使用什么設(shè)計(jì)系統(tǒng)，都可以輕松匹配應(yīng)用程序的外觀和感覺(jué)！組件可以通過(guò)KendoReact內(nèi)置主題(Material, Fluent, Bootstrap和默認(rèn)主題)，自定義CSS或ThemeBuilder輕松實(shí)現(xiàn)主題化。

可訪問(wèn)性

當(dāng)談到輸入工具時(shí)，可訪問(wèn)性絕對(duì)是至關(guān)重要的……然而，這是自己很難實(shí)現(xiàn)的，而且通常是其他組件庫(kù)所缺乏的。

KendoReact DateRangePicker包括完整的可訪問(wèn)性支持，使所有的用戶都可以輕松地導(dǎo)航您的應(yīng)用程序。它有一個(gè)內(nèi)置的role和aria-label屬性，并提供完整的鍵盤(pán)導(dǎo)航支持。aria-valuemin、aria-valuemax和aria-valuenow屬性定義了當(dāng)用戶輸入值或與DateRangePicker交互時(shí)的可訪問(wèn)性值，它還遵循WAI-ARIA為其組件角色實(shí)現(xiàn)鍵盤(pán)導(dǎo)航的最佳實(shí)踐，并且已經(jīng)用幾個(gè)流行的屏幕閱讀器進(jìn)行了測(cè)試。

DateRangePicker組件是一個(gè)重要的工具，可以在React應(yīng)用程序中快速輕松地選擇一系列日期。其廣泛的功能和可定制選項(xiàng)確保了良好的用戶體驗(yàn)，其全面的可訪問(wèn)性支持意味著每個(gè)人都可以直觀地使用它。憑借其先進(jìn)的功能和功能，它是一個(gè)強(qiáng)大的輸入工具，可以讓人感覺(jué)簡(jiǎn)單。