Events in Blazor Datetime Picker Component

22 Jun 20263 minutes to read

This section lists and describes the events raised by the DateTimePicker component for user interactions and lifecycle actions.

NOTE

Starting with v17.2.*, the DateTimePicker exposes a streamlined set of events. Event names were changed from previous releases, and several events were removed. The following table shows the event name changes from v17.1.* to v17.2.*.

Event Name(v17.1.*)	Event Name(v17.2.*)
change	ValueChange
close	OnClose
open	OnOpen
renderDayCell	OnRenderDayCell

Blur

The Blur event is triggered when the input loses focus.

@using Syncfusion.Blazor.Calendars

<SfDateTimePicker TValue="DateTime?" >
    <DateTimePickerEvents TValue="DateTime?" Blur="BlurHandler"></DateTimePickerEvents>
</SfDateTimePicker>

@code{

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

ValueChange

The ValueChange event is triggered when the DateTimePicker value (date and time) changes.

@using Syncfusion.Blazor.Calendars

<SfDateTimePicker TValue="DateTime?" >
    <DateTimePickerEvents TValue="DateTime?" ValueChange="ValueChangeHandler"></DateTimePickerEvents>
</SfDateTimePicker>

@code{

    public void ValueChangeHandler(ChangedEventArgs<DateTime?> args)
    {
        // Here, you can customize your code.
    }
}

OnClose

The OnClose event is triggered when the popup is closed.

@using Syncfusion.Blazor.Calendars

<SfDateTimePicker TValue="DateTime?" >
    <DateTimePickerEvents TValue="DateTime?" OnClose="OnCloseHandler"></DateTimePickerEvents>
</SfDateTimePicker>

@code{

    public void OnCloseHandler(object args)
    {
        // Here, you can customize your code.
    }
}

Created

The Created event is triggered when the component is created.

@using Syncfusion.Blazor.Calendars

<SfDateTimePicker TValue="DateTime?" >
    <DateTimePickerEvents TValue="DateTime?" Created="CreatedHandler"></DateTimePickerEvents>
</SfDateTimePicker>

@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

<SfDateTimePicker TValue="DateTime?" >
    <DateTimePickerEvents TValue="DateTime?" Destroyed="DestroyHandler"></DateTimePickerEvents>
</SfDateTimePicker>

@code{

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

Focus

The Focus event is triggered when the input gains focus.

@using Syncfusion.Blazor.Calendars

<SfDateTimePicker TValue="DateTime?" >
    <DateTimePickerEvents TValue="DateTime?" Focus="FocusHandler"></DateTimePickerEvents>
</SfDateTimePicker>

@code{

    public void FocusHandler(object args)
    {
        // Here, you can customize your code.
    }
}

Navigated

The Navigated event is triggered when navigating between calendar views (such as month, year, or decade) or within the same view.

@using Syncfusion.Blazor.Calendars

<SfDateTimePicker TValue="DateTime?" >
    <DateTimePickerEvents TValue="DateTime?" Navigated="NavigateHandler"></DateTimePickerEvents>
</SfDateTimePicker>


@code{

    public void NavigateHandler(NavigatedEventArgs args)
    {
        // Here, you can customize your code.
    }
}

OnOpen

The OnOpen event is triggered when the popup is opened.

@using Syncfusion.Blazor.Calendars

<SfDateTimePicker TValue="DateTime?" >
    <DateTimePickerEvents TValue="DateTime?" OnOpen="OpenHandler"></DateTimePickerEvents>
</SfDateTimePicker>


@code{

    public void OpenHandler(object args)
    {
        // Here, you can customize your code.
    }
}

OnRenderDayCell

The OnRenderDayCell event is triggered when each day cell of the calendar is rendered.

@using Syncfusion.Blazor.Calendars

<SfDateTimePicker TValue="DateTime?" >
    <DateTimePickerEvents TValue="DateTime?" OnRenderDayCell="onRenderDayCellHandler"></DateTimePickerEvents>
</SfDateTimePicker>

@code{

    public void onRenderDayCellHandler(RenderDayCellEventArgs args)
    {
        // Here, you can customize your code.
    }
}

NOTE

The DateTimePicker currently supports the events listed above. Additional events may be introduced in future releases based on user requests. If the required event is not listed, submit a request on the Feedback portal.