ASP.NET Core DateRangePicker Overview
The DateRangePicker is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI DateRangePicker TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI DateRangePicker widget.
The DateRangePicker is a container for holding start and end date inputs. It allows the user to select a date range from a calendar or through a direct input. The helper also supports custom templates for its month view, configuration options for minimum and maximum dates, a start view, and a depth for navigation.
Basic Configuration
The following example demonstrates the basic configuration for the DateRangePicker.
@(Html.Kendo().DateRangePicker()
.Name("daterangepicker") // The name of the DateRangePicker is mandatory. It specifies the "id" attribute of the DateRangePicker.
.Min(new DateTime(1900, 1, 1)) // Sets the min date of the DateRangePicker.
.Max(new DateTime(2099, 12, 31)) // Sets the min date of the DateRangePicker.
.Range(r => r.Start(DateTime.Now).End(DateTime.Now.AddDays(10))) // Sets the range of the DateRangePicker.
)
<kendo-daterangepicker name="daterangepicker"
min="new DateTime(1900, 1, 1)"
max="new DateTime(2099, 12, 31)">
<range start="DateTime.Now" end="DateTime.Now.AddDays(10)"/>
</kendo-daterangepicker>
Starting with the 2024 Q3 release, the HtmlHelper version of the component supports declarative initialization.
DateOnly compatability
As of the 2024 Q4 Release the ASP.NET Core DateRangePicker is compatible with the DateOnly type. Following this release you can also set the Start and End range of the component to a DateOnly property:
@(Html.Kendo().DateRangePicker()
.Name("daterangepicker")
.Range(r => r.Start(new DateOnly(2024,5,6)).End(new DateOnly(2024,5,6).AddDays(10))) // Sets the range of the DateRangePicker.
)
<kendo-daterangepicker name="daterangepicker">
<range start="new DateOnly(2024,5,6)" end="new DateOnly(2024,5,6).AddDays(10)"/>
</kendo-daterangepicker>
Functionality and Features
| Feature | Description |
|---|---|
| Disabled dates | The DateRangePicker allows you to disable specific days that shouldn't be selected by the end user, such as weekends and national holidays. |
| Selected dates | The DateRangePicker allows you to define the minimum and maximum dates it displays and also render a pre-selected date range. |
| Start view and navigation depth | The DateRangePicker enables you to set the initially rendered view and define the navigation depth of the views. |
| Validation | The DateRangePicker does not automatically update the typed text when the typed text is invalid. Such changes in the input value may lead to unexpected behavior. |
| Date formatting | The DateRangePicker allows you to define its date formatting. |
| Calendar types | The DateRangePicker works with Date objects which support only the Gregorian calendar. |
| Week number column | The DateRangePicker provides options for rendering a column which displays the number of the weeks within the current Month view. |
| Globalization | The DateRangePicker comes with globalization support that allows you to use the component in apps all over the world. |
| Accessibility | The DateRangePicker is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation. |
| Reverse Selection | The component allows you to pick an end date which is before the start date. |
| Buttons | Learn more about the buttons supported by the component. |
| Automatic Correction | You can configure whether the component will autocorrect the user's input when the Min and Max values are set. |
Referencing Existing Instances
To reference an existing DateRangePicker instance, use the jQuery.data() method. Once a reference has been established, use the DateRangePicker client-side API to control its behavior.
The following example demonstrates how to access an existing DateRangePicker instance.
// Place the following after the DateRangePicker for ASP.NET Core declaration.
<script>
$(function() {
// The Name() of the DateRangePicker is used to get its client-side instance.
var daterangepicker = $("#daterangepicker").data("kendoDateRangePicker");
});
</script>
Next Steps
- Getting Started with the DateRangePicker
Basic Usage of the DateRangePicker HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the DateRangePicker TagHelper for ASP.NET Core (Demo)
- DateRangePicker in Razor Pages