ASP.NET Core DateRangePicker Overview

Telerik UI for ASP.NET Core Ninja image

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>

Functionality and Features

Events

You can subscribe to all DateRangePicker events. For a complete example on basic DateRangePicker events, refer to the demo on using the events of the DateRangePicker.

The following example demonstrates how to subscribe to events by a handler name.

    @(Html.Kendo().DateRangePicker()
      .Name("daterangepicker")
      .Events(e => e
            .Open("daterangepicker_open")
            .Close("daterangepicker_close")
            .Change("daterangepicker_change")
      )
    )

    <script>
    function daterangepicker_open() {
        // Handle the open event.
    }

    function daterangepicker_close() {
        // Handle the close event.
    }

    function daterangepicker_change() {
        // Handle the change event.
    }
    </script>
    <kendo-daterangepicker name="daterangepicker"
                           on-open="daterangepicker_open"
                           on-close="daterangepicker_close"
                           on-change="daterangepicker_change">
    </kendo-daterangepicker>

    <script>
    function daterangepicker_open() {
        // Handle the open event.
    }

    function daterangepicker_close() {
        // Handle the close event.
    }

    function daterangepicker_change() {
        // Handle the change event.
    }
    </script>

Handling by Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

    @(Html.Kendo().DateRangePicker()
      .Name("daterangepicker")
      .Events(e => e
          .Open(@<text>
            function() {
                // Handle the open event inline.
            }
          </text>)
          .Change(@<text>
            function() {
                // Handle the change event inline.
            }
            </text>)
      )
    )
    <kendo-daterangepicker name="daterangepicker"
                           on-open="
                           function(){
                                // Handle the open event inline.
                           }"
                           on-change="
                           function() {
                               // Handle the change event inline.
                           }">
    </kendo-daterangepicker>

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>

See Also

In this article