Kendo UI致力于新的開發，來滿足不斷變化的需求。現在我們非常自豪地宣布，通過React框架的Kendo UI JavaScript封裝來支持React Javascript框架。KendoReact能夠為客戶提供更好的用戶體驗，并且能夠更快地構建更好的應用程序。

理想情況下，日期選擇工具應該完全無摩擦，以至于用戶根本不會注意到它們的存在。如果用戶主動注意到一個日期范圍選擇工具，那可能是它出了問題。好的設計都是無形的，但不能用因為客戶不考慮，我們開發人員也忽視它。

Kendo UI R3 2022正式版下載

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論

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

功能

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

反向日期選擇和日期交換

大多數情況下，當處理日期范圍選擇時，我們假設結束日期將在開始日期之后。但有時候也會有不同，需要用戶能夠選擇結束日期在開始日期之前的日期。

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

自定義和樣式

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

開發人員可以將以下DateRangePicker組件替換為自定義組件：

• 開始和結束日期輸入，它呈現DateRangePicker的開始和結束范圍選擇的輸入
• 日歷，在DateRangePicker的彈出窗口中呈現MultiViewCalendar
• 彈出窗口，它呈現包含MultiViewCalendar的彈出框

這允許用戶創建一個真正獨特和個性化的用戶體驗，此外DateRangePicker還支持完整的主題支持，因此無論您使用什么設計系統，都可以輕松匹配應用程序的外觀和感覺！組件可以通過KendoReact內置主題(Material, Fluent, Bootstrap和默認主題)，自定義CSS或ThemeBuilder輕松實現主題化。

可訪問性

當談到輸入工具時，可訪問性絕對是至關重要的……然而，這是自己很難實現的，而且通常是其他組件庫所缺乏的。

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

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