Progress Telerik UI for Blazor

DateRange Picker

  • Select and edit date ranges from start- and end-date inputs in a calendar popup. The Blazor DateRange Picker supports real-time rendering, animations, and synchronization.
  • This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
  • The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.

Telerik UI for Blazor Suite
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • DateRangePicker Overview

    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.

    Telerik UI for Blazor DateRangePicker Overview
  • DateRangePicker Disabled Dates

    The component allows setting certain dates as disabled, i.e. preventing users from selecting them as start and end date of the interval.

     

    Example of DateRangePicker with Disabled Dates

    Telerik UI for Blazor DateRangePicker Disabled Dates
  • DateRangePicker Events

    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.

     

    Examples with DateRangePicker Events in Blazor applications

     
    Telerik UI for Blazor Events
  • DateRangePicker Validation

    Form validation through DataAnnotation attributes comes out-of-the-box with the Telerik Blazor DateRange Picker.

     

    Blazor DateRangePicker form validation example

    Telerik UI for Blazor DateRangePicker Validation
  • DateRangePicker Globalization and Localization

    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.

     

    Example of DateRangePicker with Globalization and Localization

    Telerik UI for Blazor Globalization and Localization
  • DateRangePicker Keyboard Navigation

    The built-in keyboard navigation in the DateRange Picker component brings flexibility to users to perform interaction with the component with keyboard only.

    Example of DateRangePicker with Keyboard Support

    Telerik UI for Bazor Keyboard Navigation

Next Steps

Launch demos

See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.

Download free trial

Try Telerik UI for Blazor with dedicated technical support.