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

Events

Updated on Jun 26, 2025

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

ValueChanged
OnChange
OnOpen
OnClose
OnBlur

ValueChanged

The ValueChanged event fires upon every change (for example, keystroke) in the input, and upon clicking the Set or Now buttons in the dropdown.

The event handler receives the new value as an argument and you must update the component Value programmatically for the user changes to take effect.

Handle the TimePicker ValueChanged event

@Result
<br />
TimePicker Value: @TimePickerValue
<br />

<TelerikTimePicker Value="@TimePickerValue"
                   ValueChanged="@( (DateTime d) => TimePickerValueChanged(d) )">
</TelerikTimePicker>

@code {
    private string Result { get; set; } = string.Empty;

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

    private void TimePickerValueChanged(DateTime newValue)
    {
        Result = $"The user entered: {newValue}";

        TimePickerValue = newValue;
    }
}

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 time picker is a generic component, so you must provide either a Value, or a type to the T parameter of the component.

Handle the TimePicker OnChange event

@Result
<br />
TimePicker Value: @TimePickerValue
<br />

<TelerikTimePicker @bind-Value="@TimePickerValue"
                   OnChange="OnTimePickerChange">
</TelerikTimePicker>

@code {
    private string Result { get; set; } = string.Empty;

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

    private void OnTimePickerChange(object currentValue)
    {
        // Cast the event argument to the actual value type
        Result = $"The user entered: {(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.

OnOpen

The OnOpen event fires before the TimePicker popup renders.

The event handler receives as an argument an TimePickerOpenEventArgs object that contains:

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

<TelerikTimePicker Min="@Min"
                   OnOpen="@OnTimePickerPopupOpen"
                   Max="@Max"
                   Format="hh:mm:ss tt"
                   @bind-Value="@TimePickerValue">
</TelerikTimePicker>

@code {
    private DateTime? TimePickerValue = DateTime.Now;
    private DateTime Min = new DateTime(1900, 1, 1, 8, 15, 0);
    private DateTime Max = new DateTime(1900, 1, 1, 19, 30, 45);

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

OnClose

The OnClose event fires before the TimePicker popup closes.

The event handler receives as an argument an TimePickerCloseEventArgs 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 *@

<TelerikTimePicker Min="@Min"
                   OnClose="@OnTimePickerPopupClose"
                   Max="@Max"
                   Format="hh:mm:ss tt"
                   @bind-Value="@TimePickerValue">
</TelerikTimePicker>

@code {
    private DateTime? TimePickerValue = DateTime.Now;
    private DateTime Min = new DateTime(1900, 1, 1, 8, 15, 0);
    private DateTime Max = new DateTime(1900, 1, 1, 19, 30, 45);

    private void OnTimePickerPopupClose(TimePickerCloseEventArgs args)
    {
        //cancel the OnClose event based on a condition
        if (TimePickerValue > DateTime.Now.AddHours(1))
        {
            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 *@

<TelerikTimePicker @bind-Value="@TheTime"
                   OnBlur="@OnBlurHandler">
</TelerikTimePicker>

@code{
    async Task OnBlurHandler()
    {
        Console.WriteLine($"BLUR fired, current value is {TheTime}.");
    }

    DateTime? TheTime { get; set; } = DateTime.Now;
}