The Blazor DateRangePicker component allows users to select date periods directly from a calendar popup or edit date ranges from start and end date inputs. The date interval is visualized in real time in an animated dropdown. The Date Range Picker works in both WebAssembly (WASM) and Server-side Blazor apps, and supports forms validation, globalization, localization, keyboard navigation and provides events and two-way data binding.
Form validation through DataAnnotation attributes comes out-of-the-box with the Telerik Blazor DateRange Picker.
The component allows setting certain dates as disabled, i.e. preventing users from selecting them as start and end date of the interval.
The DateRangePicker exposes several events for capturing and handling changes to the date range values and Calendar views such as OnChange, ViewChanged, StartValueChanged and EndValueChanged.
The DateRangePicker allows you to simply configure popups from a single tag. In addition to that, the Open and Close methods allow you to toggle the popup visibility without triggering the OnOpen/OnClose events.
Using the <HeaderTemplate> you can render images, other components or custom content in the Blazor DateRangePicker header.
The DateRangePicker component includes validation modes that enable you to define whether to activate validation on change, blur, or while typing, allowing you to choose the best one for a given use case.
The UI for Blazor DateRangePicker has built-in localization and globalization which allows automatic culture-aware formats of the client, so users see the dates that are standard for their country/region. For example, by setting format to “d”, people in different locations will see different formats: MM/dd/yyyy (for US) or dd/MM/yyyy (for UK). Month names and button texts are easily translatable to any language.
The built-in keyboard navigation in the DateRange Picker component brings flexibility to users to perform interaction with the component with keyboard only.
The Telerik Blazor DateRangePicker has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap. You can easily customize any of out-of-the-box themes with a few lines of CSS, or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.