Class DateTimePickerEvents<TValue>

Represents the event callbacks for the SfDateTimePicker<TValue> component, providing handlers for various user interactions and component lifecycle events.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
DateTimePickerEvents<TValue>
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Calendars
Assembly: Syncfusion.Blazor.dll
Syntax
public class DateTimePickerEvents<TValue> : SfOwningComponentBase, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Type Parameters
Name Description
TValue

Specifies the type of the DateTimePicker value, typically DateTime or nullable DateTime.
Remarks

The DateTimePickerEvents<TValue> class contains event callback properties that allow you to handle various events raised by the DateTimePicker component. These events include value changes, focus/blur events, popup open/close events, and calendar navigation events. Use these events to implement custom logic in response to user interactions with the DateTimePicker component.

Examples

Basic usage of DateTimePicker events:

<SfDateTimePicker TValue="DateTime?">
    <DateTimePickerEvents TValue="DateTime?" 
                         ValueChange="@OnValueChange" 
                         OnOpen="@OnPopupOpen" 
                         Focus="@OnFocus" />
</SfDateTimePicker>

@code {
    private void OnValueChange(ChangedEventArgs<DateTime?> args)
    {
        Console.WriteLine($"Selected date: {args.Value}");
    }

    private void OnPopupOpen(PopupObjectArgs args)
    {
        Console.WriteLine("Popup opened");
    }

    private void OnFocus(FocusEventArgs args)
    {
        Console.WriteLine("DateTimePicker focused");
    }
}

Constructors

DateTimePickerEvents()

Declaration
public DateTimePickerEvents()

Properties

Blur

Gets or sets the event callback that will be invoked when the DateTimePicker component loses focus.

Declaration
[Parameter]
public EventCallback<BlurEventArgs> Blur { get; set; }
Property Value
Type Description
EventCallback<BlurEventArgs>

An EventCallback<TValue> that receives a BlurEventArgs when the component loses focus.
Remarks

This event is triggered when the user clicks outside the DateTimePicker component or uses keyboard navigation to move focus away from the component. Use this event to perform validation, save data, or update the UI in response to the loss of focus.

Examples
<SfDateTimePicker TValue="DateTime?">
    <DateTimePickerEvents TValue="DateTime?" Blur="@OnBlur" />
</SfDateTimePicker>

@code {
    private void OnBlur(BlurEventArgs args)
    {
        Console.WriteLine("DateTimePicker lost focus");
        // Perform validation or other actions
    }
}

Cleared

Gets or sets the event callback that will be invoked when the DateTimePicker component value is cleared using the clear button.

Declaration
[Parameter]
public EventCallback<ClearedEventArgs> Cleared { get; set; }
Property Value
Type Description
EventCallback<ClearedEventArgs>

An EventCallback<TValue> that receives a ClearedEventArgs when the component value is cleared.
Remarks

This event is triggered when the user clicks the clear button (X icon) in the DateTimePicker component to remove the selected date and time value. The clear button is typically displayed when the component has a value and the ShowClearButton property is enabled. Use this event to perform cleanup actions or update related components when the value is cleared.

Examples
<SfDateTimePicker TValue="DateTime?" ShowClearButton="true">
    <DateTimePickerEvents TValue="DateTime?" Cleared="@OnCleared" />
</SfDateTimePicker>

@code {
    private void OnCleared(ClearedEventArgs args)
    {
        Console.WriteLine("DateTimePicker value cleared");
        // Perform cleanup or related actions
    }
}

Created

Gets or sets the event callback that will be invoked when the DateTimePicker component is created and initialized.

Declaration
[Parameter]
public EventCallback<object> Created { get; set; }
Property Value
Type Description
EventCallback<object>

An EventCallback<TValue> that is invoked when the component is created. The callback receives an object parameter.
Remarks

This event is triggered once during the component lifecycle when the DateTimePicker component has been completely created and initialized. Use this event to perform initialization logic, setup event handlers, or configure the component after it has been rendered. This event occurs after the component has been added to the DOM and all initial rendering is complete.

Examples
<SfDateTimePicker TValue="DateTime?">
    <DateTimePickerEvents TValue="DateTime?" Created="@OnCreated" />
</SfDateTimePicker>

@code {
    private void OnCreated(object args)
    {
        Console.WriteLine("DateTimePicker component created");
        // Perform initialization logic
    }
}

Destroyed

Gets or sets the event callback that will be invoked when the DateTimePicker component is destroyed or disposed.

Declaration
[Parameter]
public EventCallback<object> Destroyed { get; set; }
Property Value
Type Description
EventCallback<object>

An EventCallback<TValue> that is invoked when the component is destroyed. The callback receives an object parameter.
Remarks

This event is triggered when the DateTimePicker component is being removed from the DOM or disposed of. Use this event to perform cleanup operations, unsubscribe from events, or release resources that were allocated during the component's lifetime. This event provides an opportunity to prevent memory leaks by properly cleaning up event handlers and references.

Examples
<SfDateTimePicker TValue="DateTime?">
    <DateTimePickerEvents TValue="DateTime?" Destroyed="@OnDestroyed" />
</SfDateTimePicker>

@code {
    private void OnDestroyed(object args)
    {
        Console.WriteLine("DateTimePicker component destroyed");
        // Perform cleanup operations
    }
}

Focus

Gets or sets the event callback that will be invoked when the DateTimePicker component receives focus.

Declaration
[Parameter]
public EventCallback<FocusEventArgs> Focus { get; set; }
Property Value
Type Description
EventCallback<FocusEventArgs>

An EventCallback<TValue> that receives a FocusEventArgs when the component gains focus.
Remarks

This event is triggered when the DateTimePicker component receives focus through user interaction such as clicking on the input field or using keyboard navigation (Tab key). Use this event to perform actions such as highlighting the component, showing additional UI elements, or preparing for user input. The focus event typically occurs before any input or selection events.

Examples
<SfDateTimePicker TValue="DateTime?">
    <DateTimePickerEvents TValue="DateTime?" Focus="@OnFocus" />
</SfDateTimePicker>

@code {
    private void OnFocus(FocusEventArgs args)
    {
        Console.WriteLine("DateTimePicker received focus");
        // Perform focus-related actions
    }
}

Navigated

Gets or sets the event callback that will be invoked when the calendar view is navigated to a different period or view level.

Declaration
[Parameter]
public EventCallback<NavigatedEventArgs> Navigated { get; set; }
Property Value
Type Description
EventCallback<NavigatedEventArgs>

An EventCallback<TValue> that receives a NavigatedEventArgs containing navigation information.
Remarks

This event is triggered when the user navigates within the calendar portion of the DateTimePicker popup. Navigation can occur when moving between months, years, or decades, or when switching between different calendar views (month, year, decade). Use this event to track calendar navigation, implement custom navigation logic, or update other components based on the current calendar view.

Examples
<SfDateTimePicker TValue="DateTime?">
    <DateTimePickerEvents TValue="DateTime?" Navigated="@OnNavigated" />
</SfDateTimePicker>

@code {
    private void OnNavigated(NavigatedEventArgs args)
    {
        Console.WriteLine($"Navigated to: {args.View}");
        Console.WriteLine($"Current date: {args.Date}");
    }
}

OnClose

Gets or sets the event callback that will be invoked when the DateTimePicker popup is about to close or has closed.

Declaration
[Parameter]
public EventCallback<PopupObjectArgs> OnClose { get; set; }
Property Value
Type Description
EventCallback<PopupObjectArgs>

An EventCallback<TValue> that receives a PopupObjectArgs containing popup close information.
Remarks

This event is triggered when the DateTimePicker popup (containing the calendar and time picker) is closing or has closed. You can use the Cancel property to prevent the popup from closing if needed. The popup typically closes when the user selects a value, clicks outside the popup, or presses the Escape key.

Examples
<SfDateTimePicker TValue="DateTime?">
    <DateTimePickerEvents TValue="DateTime?" OnClose="@OnPopupClose" />
</SfDateTimePicker>

@code {
    private void OnPopupClose(PopupObjectArgs args)
    {
        Console.WriteLine("Popup closing");
        // Optionally cancel the close operation
        // args.Cancel = true;
    }
}

OnItemRender

Gets or sets the event callback that will be invoked while rendering each item in the DateTimePicker popup list.

Declaration
public EventCallback<ItemEventArgs<TValue>> OnItemRender { get; set; }
Property Value
Type Description
EventCallback<ItemEventArgs<TValue>>

An EventCallback<TValue> that receives an ItemEventArgs<T> for each item being rendered in the popup.
Remarks

This event is triggered for each item (such as time slots or quick access options) that is rendered in the DateTimePicker popup. Use this event to customize the appearance, content, or behavior of individual items in the popup list. You can modify item properties, add custom CSS classes, or conditionally show/hide items based on your requirements.

Examples
<SfDateTimePicker TValue="DateTime?">
    <DateTimePickerEvents TValue="DateTime?" OnItemRender="@OnItemRender" />
</SfDateTimePicker>

@code {
    private void OnItemRender(ItemEventArgs<DateTime?> args)
    {
        // Customize item rendering
        if (args.Item != null)
        {
            args.Item.CssClass = "custom-item-style";
        }
    }
}

OnOpen

Gets or sets the event callback that will be invoked when the DateTimePicker popup is about to open or has opened.

Declaration
[Parameter]
public EventCallback<PopupObjectArgs> OnOpen { get; set; }
Property Value
Type Description
EventCallback<PopupObjectArgs>

An EventCallback<TValue> that receives a PopupObjectArgs containing popup open information.
Remarks

This event is triggered when the DateTimePicker popup (containing the calendar and time picker) is opening or has opened. You can use the Cancel property to prevent the popup from opening if needed. The popup typically opens when the user clicks on the DateTimePicker input field or presses the down arrow key. Use this event to perform setup actions, load data, or configure the popup before it is displayed to the user.

Examples
<SfDateTimePicker TValue="DateTime?">
    <DateTimePickerEvents TValue="DateTime?" OnOpen="@OnPopupOpen" />
</SfDateTimePicker>

@code {
    private void OnPopupOpen(PopupObjectArgs args)
    {
        Console.WriteLine("Popup opening");
        // Optionally cancel the open operation
        // args.Cancel = true;
    }
}

OnRenderDayCell

Gets or sets the event callback that will be invoked when each day cell in the calendar portion of the DateTimePicker popup is rendered.

Declaration
[Parameter]
public EventCallback<RenderDayCellEventArgs> OnRenderDayCell { get; set; }
Property Value
Type Description
EventCallback<RenderDayCellEventArgs>

An EventCallback<TValue> that receives a RenderDayCellEventArgs for each day cell being rendered.
Remarks

This event is triggered for each day cell that is rendered in the calendar view of the DateTimePicker popup. Use this event to customize the appearance, content, or behavior of individual day cells in the calendar. You can modify cell properties such as CSS classes, disable specific dates, add custom content, or apply conditional styling based on the date value. This is particularly useful for implementing features like highlighting special dates, disabling weekends, or showing custom indicators.

Examples
<SfDateTimePicker TValue="DateTime?">
    <DateTimePickerEvents TValue="DateTime?" OnRenderDayCell="@OnRenderDayCell" />
</SfDateTimePicker>

@code {
    private void OnRenderDayCell(RenderDayCellEventArgs args)
    {
        // Disable weekends
        if (args.Date.DayOfWeek == DayOfWeek.Saturday || args.Date.DayOfWeek == DayOfWeek.Sunday)
        {
            args.IsDisabled = true;
        }

        // Add custom CSS class for special dates
        args.CellData.ClassList = "e-custom-style";
    }
}

Selected

Gets or sets the event callback that will be invoked after selecting a date and time value from the DateTimePicker component.

Declaration
[Parameter]
public EventCallback<SelectedEventArgs<TValue>> Selected { get; set; }
Property Value
Type Description
EventCallback<SelectedEventArgs<TValue>>

An EventCallback<TValue> that receives a SelectedEventArgs<T> containing the selected value information.
Remarks

This event is triggered immediately after the user selects a date and time value from the calendar or time picker popup. Unlike the ValueChange event, this event is specifically fired when a selection is made through user interaction with the popup. Use this event when you need to respond specifically to user selection actions rather than all value changes.

Examples
<SfDateTimePicker TValue="DateTime?">
    <DateTimePickerEvents TValue="DateTime?" Selected="@OnSelected" />
</SfDateTimePicker>

@code {
    private void OnSelected(SelectedEventArgs<DateTime?> args)
    {
        Console.WriteLine($"Selected date: {args.Value}");
        // Handle the selected value
    }
}

ValueChange

Gets or sets the event callback that will be invoked when the DateTimePicker component value is changed.

Declaration
[Parameter]
public EventCallback<ChangedEventArgs<TValue>> ValueChange { get; set; }
Property Value
Type Description
EventCallback<ChangedEventArgs<TValue>>

An EventCallback<TValue> that receives a ChangedEventArgs<T> containing the old and new values when the component value changes.
Remarks

This event is triggered when the user selects a different date and time value in the DateTimePicker component. The event provides both the previous value and the newly selected value, allowing you to implement custom logic based on the value change. This is the primary event for handling value changes in the DateTimePicker component.

Examples
<SfDateTimePicker TValue="DateTime?">
    <DateTimePickerEvents TValue="DateTime?" ValueChange="@OnValueChange" />
</SfDateTimePicker>

@code {
    private void OnValueChange(ChangedEventArgs<DateTime?> args)
    {
        Console.WriteLine($"Previous value: {args.PreviousValue}");
        Console.WriteLine($"New value: {args.Value}");
    }
}

Methods

ComponentDispose(bool)

Declaration
protected void ComponentDispose(bool disposing)
Parameters
Type Name Description
bool disposing

OnInitializedAsync()

Triggers when the component is initially rendered.

Declaration
protected override Task OnInitializedAsync()
Returns
Type Description
Task

Task.
Overrides

Implements