Events
This article explains the events available in the Telerik DatePicker for Blazor:
ValueChanged
The ValueChanged event fires upon every change (for example, keystroke) in the input.
Handle ValueChanged
@result
<br />
<TelerikDatePicker ValueChanged="@( (DateTime d) => MyValueChangeHandler(d) )"></TelerikDatePicker>
@code {
string result;
private void MyValueChangeHandler(DateTime theUserInput)
{
result = string.Format("The user entered: {0}", theUserInput);
}
}
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.
Handle ValueChanged and provide initial value
@result
<br />
model value: @thePickerValue
<br />
<TelerikDatePicker Value="@thePickerValue" ValueChanged="@( (DateTime d) => MyValueChangeHandler(d) )"></TelerikDatePicker>
@code {
string result;
DateTime thePickerValue { get; set; } = DateTime.Now;
private void MyValueChangeHandler(DateTime theUserInput)
{
result = string.Format("The user entered: {0:dd/MMM/yyyy}", theUserInput);
//you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value
thePickerValue = theUserInput;
}
}
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 date picker is a generic component, so you must provide either a Value, or a type to the T parameter of the component.
Handle OnChange
@result
<br />
<TelerikDatePicker T="DateTime" OnChange="@MyOnChangeHandler"></TelerikDatePicker>
@code {
string result;
private void MyOnChangeHandler(object theUserInput)
{
// the handler receives an object that you may need to cast to the type of the component
// if you do not provide a Value, you must provide the Type parameter to the component
result = string.Format("The user entered: {0:dd/MMM/yyyy}", (DateTime)theUserInput);
}
}
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.
Handle OnChange and use two-way binding
@result
<br />
model value: @thePickerValue
<br />
<TelerikDatePicker @bind-Value="@thePickerValue" OnChange="@MyOnChangeHandler"></TelerikDatePicker>
@code {
string result;
DateTime? thePickerValue { get; set; } = DateTime.Now;
private void MyOnChangeHandler(object theUserInput)
{
// the handler receives an object that you may need to cast to the type of the component
// if you do not provide a Value, you must provide the Type parameter to the component
result = string.Format("The user entered: {0:dd/MMM/yyyy}", (theUserInput as DateTime?).Value);
}
}
OnOpen
The OnOpen event fires before the DatePicker popup renders.
The event handler receives as an argument an DatePickerOpenEventArgs object that contains:
| Property | Description |
|---|---|
IsCancelled |
Set the IsCancelled property to true to cancel the opening of the popup. |
<TelerikDatePicker @bind-Value="@DatePickerValue"
OnOpen="@OnDatePickerPopupOpen"
Format="dd MMMM yyyy"
Min="@Min" Max="@Max">
</TelerikDatePicker>
@code {
private DateTime DatePickerValue { get; set; } = DateTime.Now;
private DateTime Min = new DateTime(1990, 1, 1, 8, 15, 0);
private DateTime Max = new DateTime(2025, 1, 1, 19, 30, 45);
private void OnDatePickerPopupOpen(DatePickerOpenEventArgs args)
{
//set the IsCancelled to true to cancel the OnOpen event
args.IsCancelled = false;
}
}
OnClose
The OnClose event fires before the DatePicker popup closes.
The event handler receives as an argument an DatePickerCloseEventArgs object that contains:
| Property | Description |
|---|---|
IsCancelled |
Set the IsCancelled property to true to cancel the closing of the popup. |
@* Cancel the OnClose event based on a condition *@
<TelerikDatePicker @bind-Value="@DatePickerValue"
OnClose="@OnDatePickerPopupClose"
Format="dd MMMM yyyy"
Min="@Min" Max="@Max">
</TelerikDatePicker>
@code {
private DateTime DatePickerValue { get; set; } = DateTime.Today;
private DateTime Min = new DateTime(1990, 1, 1, 8, 15, 0);
private DateTime Max = new DateTime(2025, 1, 1, 19, 30, 45);
private void OnDatePickerPopupClose(DatePickerCloseEventArgs args)
{
//cancel the OnClose event based on a condition
if (DatePickerValue > DateTime.Today)
{
args.IsCancelled = true;
}
}
}
OnBlur
The OnBlur event fires when the component loses focus.
Handle the OnBlur event
@* You do not have to use OnChange to react to loss of focus *@
<TelerikDatePicker @bind-Value="@TheDate"
OnBlur="@OnBlurHandler">
</TelerikDatePicker>
@code{
async Task OnBlurHandler()
{
Console.WriteLine($"BLUR fired, current value is {TheDate}.");
}
DateTime? TheDate { get; set; } = DateTime.Now;
}
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 DatePickerCalendarCellRenderEventArgs 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.
@* Customize the calendar cells using the OnCalendarCellRender event. *@
<TelerikDatePicker OnCalendarCellRender="@OnCalendarCellRenderHandler"
@bind-Value="DatePickerValue"
Width="295px">
</TelerikDatePicker>
@code {
private DateTime DatePickerValue { get; set; } = DateTime.Now;
private void OnCalendarCellRenderHandler(DatePickerCalendarCellRenderEventArgs args)
{
if (args.View == CalendarView.Month)
{
args.Class = args.Date.Day % 3 == 0 ? "special" : "";
}
else if (args.View == CalendarView.Decade)
{
args.Class = args.Date.Year == 2020 ? "special" : "";
}
}
}
<style>
.special {
color: white;
background-color: greenyellow;
font-weight: bold;
}
</style>