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>
Functionality and Features
- Disabled dates
- Selected dates
- Start view and navigation depth
- Validation
- Date formatting
- Calendar types
- Week number column
- Globalization
- Accessibility
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>