ASP.NET MVC DateRangePicker Overview
The DateRangePicker is part of Telerik UI for ASP.NET MVC, 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 HtmlHelper for ASP.NET MVC is a server-side wrapper 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.
)
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 MVC 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 MVC (Demo)