Events in Blazor TimePicker

27 Aug 20263 minutes to read

This section lists the events exposed by the Blazor TimePicker component and the actions that trigger them.

Event Name(v17.1.*) Event Name(v17.2.*)
change ValueChange
close OnClose
created Created
destroyed Destroyed
focus Focus
blur Blur
itemRender OnItemRender
open OnOpen

Blur

The Blur event is triggered when the input loses focus.

@using Syncfusion.Blazor.Calendars

<SfTimePicker TValue="DateTime?">
    <TimePickerEvents TValue="DateTime?" Blur="BlurHandler"></TimePickerEvents>
</SfTimePicker>

@code{

    public void BlurHandler(Syncfusion.Blazor.Calendars.BlurEventArgs args)
    {
        // Here you can customize your code
    }
}

ValueChange

The ValueChange event is triggered when the Blazor TimePicker value is changed.

@using Syncfusion.Blazor.Calendars

<SfTimePicker TValue="DateTime?">
    <TimePickerEvents TValue="DateTime?" ValueChange="ValueChangeHandler"></TimePickerEvents>
</SfTimePicker>

@code{

    public void ValueChangeHandler(Syncfusion.Blazor.Calendars.ChangeEventArgs<DateTime?> args)
    {
        // Here you can customize your code
    }
}

OnClose

The OnClose event is triggered when the popup is closed.

@using Syncfusion.Blazor.Calendars

<SfTimePicker TValue="DateTime?">
    <TimePickerEvents TValue="DateTime?" OnClose="OnCloseHandler"></TimePickerEvents>
</SfTimePicker>

@code{

    public void OnCloseHandler(Syncfusion.Blazor.Calendars.PopupEventArgs args)
    {
        // Here you can customize your code
    }
}

Created

The Created event is triggered after the component is created.

@using Syncfusion.Blazor.Calendars

<SfTimePicker TValue="DateTime?">
    <TimePickerEvents TValue="DateTime?" Created="CreatedHandler"></TimePickerEvents>
</SfTimePicker>

@code{

    public void CreatedHandler(object args)
    {
        // Here you can customize your code
    }
}

Destroyed

The Destroyed event is triggered when the component is destroyed.

@using Syncfusion.Blazor.Calendars

<SfTimePicker TValue="DateTime?">
    <TimePickerEvents TValue="DateTime?" Destroyed="DestroyHandler"></TimePickerEvents>
</SfTimePicker>

@code{

    public void DestroyHandler(object args)
    {
        // Here you can customize your code
    }
}

Focus

The Focus event is triggered when the input receives focus.

@using Syncfusion.Blazor.Calendars

<SfTimePicker TValue="DateTime?">
    <TimePickerEvents TValue="DateTime?" Focus="FocusHandler"></TimePickerEvents>
</SfTimePicker>

@code{

    public void FocusHandler(Syncfusion.Blazor.Calendars.FocusEventArgs args)
    {
        // Here you can customize your code
    }
}

OnItemRender

The OnItemRender event is triggered while rendering each popup list item.

@using Syncfusion.Blazor.Calendars

<SfTimePicker TValue="DateTime?">
    <TimePickerEvents TValue="DateTime?" OnItemRender="OnItemRenderHandler"></TimePickerEvents>
</SfTimePicker>

@code{

    public void OnItemRenderHandler(Syncfusion.Blazor.Calendars.ItemEventArgs<DateTime?> args)
    {
        // Here you can customize your code
    }
}

OnOpen

The OnOpen event is triggered when the popup is opened.

@using Syncfusion.Blazor.Calendars

<SfTimePicker TValue="DateTime?">
    <TimePickerEvents TValue="DateTime?" OnOpen="OpenHandler"></TimePickerEvents>
</SfTimePicker>

@code{

    public void OpenHandler(Syncfusion.Blazor.Calendars.PopupEventArgs args)
    {
        // Here you can customize your code
    }
}

NOTE

The Blazor TimePicker currently supports the events listed above. New events may be added in the future based on user requests. If the event you are looking for is not in the list, request it at the Syncfusion Blazor feedback portal.

See also