Events
This article explains the events available in the Telerik DateRangePicker for Blazor:
StartValueChanged and EndValueChanged
The two ValueChanged events (StartValueChanged and EndValueChanged) fire when the user selects a new range.
When the user types in the inputs, they fire independently - only the event for the corresponding input fires.
When the user selects a range from the calendar popup, the first click always fires the start change with the selected date, and then clears the end of the range, so the end change event fires as well, with the default value for the model field.
The user can only type in the inputs and that will fire the corresponding event. Selecting from the calendar popup also fires the event. There is no way to know what the user intent is when they start modifying the values - whether they will modify one or both, so there is no definitive way to know when the user has finished using the component. Such logic is heuristic and is up to the application.
If
AdaptiveRenderingis enabled, on small and medium devicesStartValueChangedandEndValueChangedwill fire only when the user clicks the confirmation button in the action sheet.
Handle StartValueChanged and EndValueChanged
The event is an
EventCallback. It can be synchronous and returnvoid, or asynchronous and returnasync Task. Do not useasync void.
The lambda expression in the handler is required by the framework: https://github.com/aspnet/AspNetCore/issues/12226.
OnChange
The OnChange event represents a user action - confirmation of the current value. It fires when the user presses Enter in the input, or when the input loses focus. The focus will also be lost when the user starts clicking in the calendar popup.
Handle OnChange
OnOpen
The OnOpen event fires before the DateRangePicker popup renders.
The event handler receives as an argument an DateRangePickerOpenEventArgs object that contains:
| Property | Description |
|---|---|
IsCancelled | Set the IsCancelled property to true to cancel the opening of the popup. |
The event is an
EventCallback. It can be synchronous and returnvoid, or asynchronous and returnasync Task. Do not useasync void.
The
OnChangeevent is a custom event and does not interfere with bindings, so you can use it together with models and forms.
OnClose
The OnClose event fires before the DateRangePicker popup closes.
The event handler receives as an argument an DateRangePickerCloseEventArgs object that contains:
| Property | Description |
|---|---|
IsCancelled | Set the IsCancelled property to true to cancel the closing of the popup. |
ViewChanged
The ViewChanged event fires when the user changes the view they are seeing in the calendar popup (for example, goes up from the days in the month to the months in the year).
Handle the ViewChanged event
The event is an
EventCallback. It can be synchronous and returnvoid, or asynchronous and returnasync Task. Do not useasync void.
OnCalendarCellRender
The OnCalendarCellRender event fires when each calendar cell in each view is about to render. The event allows you to find out the current view and cell date. You can also set a custom CSS class for the <td> element.
The event handler receives as an argument an DateRangePickerCalendarCellRenderEventArgs object that contains:
| Property | Type | Description |
|---|---|---|
Class | string | A custom CSS class for the calendar cell DOM element. |
Date | DateTime | The date of the calendar cell. |
View | CalendarView enum ( Month) | The currently visible view. You can use it to determine if the calendar is rendering the MonthView, YearView, and so on. |
Handle the OnCalendarCellRender event.