Events in Blazor DatePicker Component
7 Aug 20264 minutes to read
This section lists the events of the DatePicker component and the actions that trigger them. The events are exposed through the DatePickerEvents child content and use the Syncfusion.Blazor.Calendars namespace for their event-argument types.
| change | ValueChange |
| close | OnClose |
| open | OnOpen |
| renderDayCell | OnRenderDayCell |
Blur
The Blur event triggers when the input loses focus. It receives a BlurEventArgs parameter that contains the original browser event in args.Event.
@using Syncfusion.Blazor.Calendars
<SfDatePicker TValue="DateTime?">
<DatePickerEvents TValue="DateTime?" Blur="BlurHandler"></DatePickerEvents>
</SfDatePicker>
@code{
public void BlurHandler(Syncfusion.Blazor.Calendars.BlurEventArgs args)
{
// Here, you can customize your code.
}
}ValueChange
The ValueChange event triggers when the Calendar value changes. It receives a [ChangedEventArgs
@using Syncfusion.Blazor.Calendars
<SfDatePicker TValue="DateTime?">
<DatePickerEvents TValue="DateTime?" ValueChange="ValueChangeHandler"></DatePickerEvents>
</SfDatePicker>
@code{
public void ValueChangeHandler(ChangedEventArgs<DateTime?> args)
{
// Here, you can customize your code.
}
}OnClose
The OnClose event triggers when the popup is closed. It receives a PopupObjectArgs parameter that exposes the closing popup element and related metadata.
@using Syncfusion.Blazor.Calendars
<SfDatePicker TValue="DateTime?">
<DatePickerEvents TValue="DateTime?" OnClose="OnCloseHandler"></DatePickerEvents>
</SfDatePicker>
@code{
public void OnCloseHandler(PopupObjectArgs args)
{
// Here, you can customize your code.
}
}Created
The Created event triggers after the component finishes its initial render. It is typically used for one-time setup such as attaching JS interop callbacks.
@using Syncfusion.Blazor.Calendars
<SfDatePicker TValue="DateTime?">
<DatePickerEvents TValue="DateTime?" Created="CreatedHandler"></DatePickerEvents>
</SfDatePicker>
@code{
public void CreatedHandler(object args)
{
// Here, you can customize your code.
}
}Destroyed
The Destroyed event triggers when the component is disposed. Use it to release any resources allocated in the Created handler.
@using Syncfusion.Blazor.Calendars
<SfDatePicker TValue="DateTime?">
<DatePickerEvents TValue="DateTime?" Destroyed="DestroyHandler"></DatePickerEvents>
</SfDatePicker>
@code{
public void DestroyHandler(object args)
{
// Here, you can customize your code.
}
}Focus
The Focus event triggers when the input receives focus. It receives a FocusEventArgs parameter that contains the original browser event in args.Event.
@using Syncfusion.Blazor.Calendars
<SfDatePicker TValue="DateTime?">
<DatePickerEvents TValue="DateTime?" Focus="FocusHandler"></DatePickerEvents>
</SfDatePicker>
@code{
public void FocusHandler(FocusEventArgs args)
{
// Here, you can customize your code.
}
}Navigated
The Navigated event triggers when the Calendar navigates to another level (for example, from month to year) or within the same level. It receives a NavigatedEventArgs parameter with args.View and args.Date properties.
@using Syncfusion.Blazor.Calendars
<SfDatePicker TValue="DateTime?">
<DatePickerEvents TValue="DateTime?" Navigated="NavigateHandler"></DatePickerEvents>
</SfDatePicker>
@code{
public void NavigateHandler(NavigatedEventArgs args)
{
// Here, you can customize your code.
}
}OnOpen
The OnOpen event triggers when the popup is opened. It receives a PopupObjectArgs parameter that exposes the opening popup element and related metadata.
@using Syncfusion.Blazor.Calendars
<SfDatePicker TValue="DateTime?">
<DatePickerEvents TValue="DateTime?" OnOpen="OpenHandler"></DatePickerEvents>
</SfDatePicker>
@code{
public void OpenHandler(PopupObjectArgs args)
{
// Here, you can customize your code.
}
}OnRenderDayCell
The OnRenderDayCell event triggers when each day cell of the Calendar is rendered. It receives a RenderDayCellEventArgs parameter that you can use to add custom classes or attributes to the cell via args.Cell.AddClass(...) or to set args.IsDisabled and other properties.
@using Syncfusion.Blazor.Calendars
<SfDatePicker TValue="DateTime?">
<DatePickerEvents TValue="DateTime?" OnRenderDayCell="onRenderDayCellHandler"></DatePickerEvents>
</SfDatePicker>
@code{
public void onRenderDayCellHandler(RenderDayCellEventArgs args)
{
// Here, you can customize your code.
}
}