ASP.NET MVC DateRangePicker

  • Easily input or select a date range from a calendar with the ASP.NET MVC DateRangePicker component. Supporting a variety of custom templates, keyboard navigation and more.
  • Part of the Telerik UI for ASP.NET MVC library along with 110+ professionally designed UI components.
  • Includes support, documentation, demos, virtual classrooms and more!
Telerik UI for ASP.NET MVC Suite
  • Overview

    The Telerik UI for ASP.NET MVC DateRangePicker represents a container that allows users to pick a start and end date from a dropdown calendar or by manually typing in the dates. The DateRangePicker offers options for different views and navigation depths, disabled dates, custom month view templates and more. It also comes with built-in accessibility and globalization features as well as RTL support.

    Telerik UI for ASP.NET MVC DateRangePicker - Overview
  • Disabled Dates

    The DateRangePicker component offers a disabled dates feature, which prevent users from selecting specific days, such as national holidays, weekends and others. To enable the feature, you can either add a function or set an array listing the names of the days that you want to disable. Check out the documentation page to learn more.

    Telerik UI for ASP.NET MVC DateRangePicker - Disabled Dates
  • Selected Dates

    You have the option to display a pre-selected date range that users can change manually through the inputs or from the dropdown calendar. It is configured by setting a minimum and maximum date within the ASP.NET MVC DateRangePicker. Check out the demo on date range selection and the documentation article to see how to configure the selected dates option.

    Telerik UI for ASP.NET MVC DateRangePicker - Selection
  • Start View and Navigation Depth

    You can configure the initial view of the ASP.NET MVC DateRangePicker using the Start property and set the navigation depth within the calendar through the Depth option. You can define the default view choosing from the four predefined views: Month, Year, Decade and Century. Refer to the documentation page for more information.
    Telerik UI for ASP.NET MVC DateRangePicker - Active View and View Depth
  • Validation

    The Telerik UI for ASP.NET MVC DateRangePicker is designed to keep its input value unchanged even when the typed date is invalid.

    Read more in our documentation

  • Adaptive Mode

    The DateRangePicker adaptive mode enables a mobile-friendly rendering of its calendar popup. Simply set the AdaptiveMode parameter to AdaptiveMode.Auto – this will trigger the picker component to automatically adapt to the current screen size and will change its rendering accordingly.

    See the Telerik UI for ASP.NET MVC DateRangePicker Adaptive Rendering Demo

    Telerik-UI-for-ASP.NET MVC-DateRangePicker-Component-Adaptive-Rendering
  • Flexible Client and Server-side API

    The ASP.NET MVC DateRangePicker provides rich server- and client-side API functions, allowing you to create advanced and specific scenarios. The available properties, methods and events offer robust functionalities, such as enable/disable, open/close the calendar or get/set values.

    Telerik UI for ASP.NET Core Rich API
  • Globalization and Localization

    The ASP.NET MVC DataRangePicker provides globalization and localization support, which allows to adapt date formats to specific cultural requirements. To define the culture, use the Culture property. To learn more about the feature, visit the documentation page
    Telerik UI for ASP.NET MVC Globalization Localization
  • RTL (Right-To-Left) Support

    The DateRangePicker comes with built-in RTL support for users who communicate in Arabic, Hebrew, Chinese or Japanese. The feature allows you to perform right-to-left rendering and satisfy any local preference with only a few settings to achieve a better user experience.  Find out more about this functionality from the documentation article.

    RTL Support
  • Keyboard Navigation and Accessibility

    The Telerik UI for ASP.NET MVC DateRangePicker component provides accessibility support and complies with WAI-ARIA, WCAG 2.1 and Section 508 guidelines, ensuing easy interaction for individuals with disabilities. In addition, the component has available keyboard navigation and you can easily open/close the DateRangePicker and perform all actions within the control using just your keyboard.

    Telerik UI for ASP.NET Core Keyboard Navigation

All ASP.NET MVC Components

Next Steps