New to Telerik UI for Blazor? Start a free 30-day trial

Events

Updated on Aug 29, 2025

This article explains the events available in the Telerik DateTimePicker for Blazor:

OnBlur
OnCalendarCellRender
OnChange
OnClose
OnOpen
ValueChanged

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 *@

@result

<TelerikDateTimePicker @bind-Value="@DateTimePickerValue"
                       OnBlur="@OnBlurHandler">
</TelerikDateTimePicker>

@code {
    private string result = string.Empty;

    private DateTime? DateTimePickerValue { get; set; } = DateTime.Now;

    private void OnBlurHandler()
    {
        result = $"BLUR fired, current value is {DateTimePickerValue}.";
    }
}

The event is an EventCallback. It can be synchronous and return void, or asynchronous and return async Task. Do not use async void.

OnCalendarCellRender

The OnCalendarCellRender event fires when each calendar cell in each view is about to render. The event allows you to:

Identify the current view.
Find out the cell date.
Set a custom CSS class for the <td> element.

As an argument, the event handler receives a DateTimePickerCalendarCellRenderEventArgs object, which contains the following properties:

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. *@

<TelerikDateTimePicker @bind-Value="@DateTimePickerValue"
                       OnCalendarCellRender="@OnCalendarCellRenderHandler"
                       Width="295px">
</TelerikDateTimePicker>

<style>
    .special {
        color: white;
        background-color: greenyellow;
        font-weight: bold;
    }
</style>

@code {
    private DateTime? DateTimePickerValue { get; set; } = DateTime.Now;

    private void OnCalendarCellRenderHandler(DateTimePickerCalendarCellRenderEventArgs 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" : "";
        }
    }
}

OnChange

The OnChange event represents a user action that confirms the current value. It fires when the user:

Presses Enter while the textbox is focused.
Clicks Set in the date and time selection popup.
Blurs the component.

The event handler receives an object argument that you need to cast to the actual Value type. The argument can hold a value or be null, depending on the user input and the Value type.

The DateTimePicker is a generic component, so you must either provide a Value, or a type to the T parameter of the component.

Handle DateTimePicker OnChange and use two-way Value binding

<TelerikDateTimePicker @bind-Value="@DateTimePickerValue"
                       OnChange="@DateTimePickerValueChanged"
                       Width="300px">
</TelerikDateTimePicker>

<span><code>OnChange</code> fired at <strong>@LastOnChange?.ToString("HH:mm:ss.fff")</strong></span>

@code {
    private DateTime? DateTimePickerValue { get; set; }
    private DateTime? LastOnChange { get; set; }

    private void DateTimePickerValueChanged(object currentValue)
    {
        LastOnChange = DateTime.Now;
        Console.WriteLine($"The current Value is {(DateTime?)currentValue}");
    }
}

The event is an EventCallback. It can be synchronous and return void, or asynchronous and return async Task. Do not use async void.

The OnChange event 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 DateTimePicker popup closes.

As an argument, the event handler receives a DateTimePickerCloseEventArgs object, which contains the following properties:

Property	Description
`IsCancelled`	Set the `IsCancelled` property to `true` to cancel the closing of the popup.

@* Cancel the OnClose event based on a condition *@

<TelerikDateTimePicker @bind-Value="@DateTimePickerValue"
                       OnClose="@OnDateTimePickerPopupClose">
</TelerikDateTimePicker>

@code {
    private DateTime? DateTimePickerValue = DateTime.Now;

    private void OnDateTimePickerPopupClose(DateTimePickerCloseEventArgs args)
    {
        //cancel the OnClose event based on a condition
        if (DateTimePickerValue > DateTime.Now)
        {
            args.IsCancelled = true;
        }
    }
}

The event is an EventCallback. It can be synchronous and return void, or asynchronous and return async Task. Do not use async void.

OnOpen

The OnOpen event fires before the DateTimePicker popup renders.

As an argument, the event handler receives a DateTimePickerOpenEventArgs object, which contains the following properties:

Property	Description
`IsCancelled`	Set the `IsCancelled` property to `true` to cancel the opening of the popup.

<TelerikDateTimePicker @bind-Value="@DateTimePickerValue"
                       OnOpen="@OnDateTimePickerPopupOpen">
</TelerikDateTimePicker>

@code {
    private DateTime? DateTimePickerValue = DateTime.Now;

    private void OnDateTimePickerPopupOpen(DateTimePickerOpenEventArgs args)
    {
        //set the IsCancelled to true to cancel the OnOpen event
        args.IsCancelled = false;
    }
}

The event is an EventCallback. It can be synchronous and return void, or asynchronous and return async Task. Do not use async void.

ValueChanged

The ValueChanged event fires:

On Calendar or TimeView selection and during typing when the resulting input value is valid.
On input blur if the input value is not valid and the Value type is nullable.

Handle ValueChanged and provide initial value

@result
<br />
model value: @DateTimePickerValue
<br />

<TelerikDateTimePicker Value="@DateTimePickerValue" 
                       ValueChanged="@( (DateTime d) => MyValueChangeHandler(d) )">
</TelerikDateTimePicker>

@code {
    private string result = string.Empty;

    private DateTime DateTimePickerValue { get; set; } = DateTime.Now;

    private void MyValueChangeHandler(DateTime userInput)
    {
        result = string.Format("The user entered: {0:dd/MMM/yyyy}", userInput);

        //you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value
        DateTimePickerValue = userInput;
    }
}

The event is an EventCallback. It can be synchronous and return void, or asynchronous and return async Task. Do not use async void.

The lambda expression in the handler is required by the framework: https://github.com/aspnet/AspNetCore/issues/12226.