Events
You can subscribe to the Open, Close, and Change DateRangePicker events and further customize the functionality of the component.
For a complete example on basic DateRangePicker events, refer to the demo on using the events of the DateRangePicker.
Handling Events by Handler Name
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 Events 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>