ASP.NET Core DateRangePicker Overview

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.

• Demo page for the DateRangePicker HtmlHelper

• Demo page for the DateRangePicker TagHelper

Basic Configuration

The following example demonstrates the basic configuration for the DateRangePicker.

Razor

    @(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.
    )

Razor

     <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:

Razor

    @(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.
    )

Razor

     <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.

Razor

    // 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

See Also

• Using the API of the DateRangePicker for ASP.NET Core (Demo)
• Knowledge Base Section