Class SfDateTimePicker<TValue>
The DateTimePicker is a graphical user interface component that allows users to select both date and time values through an interactive popup interface.
Inheritance
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Toolkit.Calendars
Assembly: Syncfusion.Blazor.Toolkit.dll
Syntax
public class SfDateTimePicker<TValue> : SfDatePicker<TValue>, IAsyncDisposable, IMaskPlaceholderType Parameters
| Name | Description |
|---|---|
| TValue | Specifies the type of the DateTimePicker value, typically System.DateTime or nullable DateTime. |
Remarks
The SfDateTimePicker component extends the functionality of a standard DatePicker by providing additional time selection capabilities. It supports features like time step intervals, minimum and maximum time constraints, Islamic calendar mode, and various formatting options. The component provides separate popups for date and time selection, making it easy for users to specify precise date-time values.
Examples
Basic usage of the DateTimePicker component:
<SfDateTimePicker TValue="DateTime" Value="DateTime.Now" Format="dd/MM/yyyy HH:mm">
</SfDateTimePicker>Basic usage of DateTimePicker events:
<SfDateTimePicker TValue="DateTime?"
ValueChange="@OnValueChange"
OnOpen="@OnPopupOpen"
OnFocus="@OnFocus" />
@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");
}
}<SfDateTimePicker TValue="DateTime?" @bind-Value="@SelectedDateTime"
Min="@MinDateTime" Max="@MaxDateTime"
MinTime="@MinTime" MaxTime="@MaxTime"
Step="30" TimeFormat="HH:mm">
</SfDateTimePicker>
@code {
DateTime? SelectedDateTime = DateTime.Now;
DateTime MinDateTime = new DateTime(2024, 1, 1, 9, 0, 0);
DateTime MaxDateTime = new DateTime(2024, 12, 31, 18, 0, 0);
DateTime MinTime = new DateTime(2024, 1, 1, 9, 0, 0);
DateTime MaxTime = new DateTime(2024, 1, 1, 18, 0, 0);
}Constructors
SfDateTimePicker()
Declaration
public SfDateTimePicker()Properties
Max
Gets or sets the maximum date and time value that can be selected in the SfDateTimePicker<TValue> component.
Declaration
public override DateTime Max { get; set; }Property Value
| Type | Description |
|---|---|
| System.DateTime | A System.DateTime value that represents the maximum date and time that can be selected. The default value is |
Overrides
Remarks
The Max property defines the latest date and time that can be selected in the DateTimePicker component. When combined with the MaxTime property, the following behaviors apply:
Users will not be able to select any date and time beyond this maximum value.Examples
<SfDateTimePicker TValue="DateTime?" Max="@MaxDateTime">
</SfDateTimePicker>
@code {
DateTime MaxDateTime = new DateTime(2024, 12, 31, 23, 59, 59);
}MaxTime
Gets or sets the maximum time that can be selected in the time popup of the SfDateTimePicker<TValue> component.
Declaration
public DateTime MaxTime { get; set; }Property Value
| Type | Description |
|---|---|
| System.DateTime | A System.DateTime value representing the maximum selectable time. The default value is |
Remarks
The MaxTime property restricts the time selection for all dates except the specific date defined by the Max property. The following behaviors apply when both MaxTime and Max are configured:
This property is particularly useful for setting business hours or operational time limits across all selectable dates.Examples
<SfDateTimePicker TValue="DateTime?" MinTime="@MinTime" MaxTime="@MaxTime">
</SfDateTimePicker>
@code {
DateTime MinTime = new DateTime(2024, 8, 6, 9, 0, 0);
DateTime MaxTime = new DateTime(2024, 8, 6, 18, 0, 0);
}Min
Gets or sets the minimum date and time value that can be selected in the SfDateTimePicker<TValue> component.
Declaration
public override DateTime Min { get; set; }Property Value
| Type | Description |
|---|---|
| System.DateTime | A System.DateTime value that represents the minimum date and time that can be selected. The default value is |
Overrides
Remarks
The Min property defines the earliest date and time that can be selected in the DateTimePicker component. When combined with the MinTime property, the following behaviors apply:
Users will not be able to select any date and time before this minimum value.Examples
<SfDateTimePicker TValue="DateTime?" Min="@MinDateTime">
</SfDateTimePicker>
@code {
DateTime MinDateTime = new DateTime(2024, 1, 1, 0, 0, 0);
}MinTime
Gets or sets the minimum time that can be selected in the time popup of the SfDateTimePicker<TValue> component.
Declaration
public DateTime MinTime { get; set; }Property Value
| Type | Description |
|---|---|
| System.DateTime | A System.DateTime value representing the minimum selectable time. The default value is |
Remarks
The MinTime property restricts the time selection for all dates except the specific date defined by the Min property. The following behaviors apply when both MinTime and Min are configured:
This property is particularly useful for setting business hours or operational time limits across all selectable dates.Examples
<SfDateTimePicker TValue="DateTime?" MinTime="@MinTime" MaxTime="@MaxTime">
</SfDateTimePicker>
@code {
DateTime MinTime = new DateTime(2024, 8, 6, 9, 0, 0);
DateTime MaxTime = new DateTime(2024, 8, 6, 18, 0, 0);
}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 |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<ItemEventArgs<TValue>> | An Microsoft.AspNetCore.Components.EventCallback<> 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?" OnItemRender="@OnItemRender" />
@code {
private void OnItemRender(ItemEventArgs<DateTime?> args)
{
// Customize item rendering
if (args.Item is not null)
{
args.Item.CssClass = "custom-item-style";
}
}
}OnKeyDown
Gets or sets an event callback that is triggered when a key is pressed down while the input element has focus.
Declaration
public EventCallback<KeyboardEventArgs> OnKeyDown { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<Microsoft.AspNetCore.Components.Web.KeyboardEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when a key down event occurs on the input element. |
Remarks
This event allows you to handle keyboard interactions such as navigation keys, Enter key for selection, and Escape key for closing popups. The event is particularly useful for implementing custom keyboard shortcuts and navigation behavior in the DateTimePicker component.
Examples
Handling the OnKeyDown event:
<SfDateTimePicker TValue="DateTime" OnKeyDown="HandleKeyDown">
</SfDateTimePicker>
private async Task HandleKeyDown(KeyboardEventArgs args)
{
if (args.Key == "F2")
{
// Custom functionality
}
}ScrollTo
Gets or sets the scroll bar position in the time popup list when no value is selected or the given value is not present in the DateTimePicker popup list.
Declaration
public Nullable<DateTime> ScrollTo { get; set; }Property Value
| Type | Description |
|---|---|
| System.Nullable<System.DateTime> | A System.Nullable<> value that represents the scroll position in the time popup list. The default value is |
Remarks
The ScrollTo property determines the initial scroll position of the time popup list. When set, the time popup will scroll to the specified time value, making it visible in the dropdown. If the specified time is not available in the popup list or if no value is provided, the component will use this property to set the scroll position.
Examples
<SfDateTimePicker TValue="DateTime?" ScrollTo="@ScrollPosition">
</SfDateTimePicker>
@code {
DateTime? ScrollPosition = new DateTime(2024, 1, 1, 14, 30, 0);
}Step
Gets or sets the time interval between adjacent time values in the time popup list of the SfDateTimePicker<TValue> component.
Declaration
public int Step { get; set; }Property Value
| Type | Description |
|---|---|
| System.Int32 | An |
Remarks
The Step property controls the granularity of time selection in the dropdown list. For example, if set to 30 minutes, the time options will appear as 00:00, 00:30, 01:00, 01:30, and so on. Smaller values provide finer time selection granularity, while larger values reduce the number of available options in the dropdown. The step value must be a positive integer representing minutes.
Examples
<SfDateTimePicker TValue="DateTime?" Step="15">
</SfDateTimePicker>
<!-- This creates time intervals of 15 minutes: 00:00, 00:15, 00:30, 00:45, etc. -->TimeFormat
Gets or sets the format of the time value to be displayed in the time popup list of the SfDateTimePicker<TValue> component.
Declaration
public string TimeFormat { get; set; }Property Value
| Type | Description |
|---|---|
| System.String | A |
Remarks
The TimeFormat property allows you to customize how time values appear in the dropdown list. You can use standard .NET DateTime format strings such as "HH:mm", "hh:mm tt", "H:mm", etc. If not specified, the component will use the default time format based on the current culture. This property only affects the display format in the time popup list and does not change the actual value format.
Examples
<SfDateTimePicker TValue="DateTime?" TimeFormat="HH:mm">
</SfDateTimePicker>
<!-- Displays time in 24-hour format: 09:30, 14:45, etc. -->
<SfDateTimePicker TValue="DateTime?" TimeFormat="hh:mm tt">
</SfDateTimePicker>
<!-- Displays time in 12-hour format with AM/PM: 09:30 AM, 02:45 PM, etc. -->Methods
BuildRenderTree(RenderTreeBuilder)
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)Parameters
| Type | Name | Description |
|---|---|---|
| Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder | __builder |
Overrides
ShowDatePopupAsync()
Opens the date picker popup to show the calendar for date selection.
Declaration
public Task ShowDatePopupAsync()Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
This method programmatically opens the calendar popup, allowing users to select a date. It's useful for implementing custom UI behaviors or keyboard shortcuts that should open the date picker.
Examples
Opening the date popup programmatically:
@ref SfDateTimePicker<DateTime> dateTimePicker;
private async Task OpenCalendar()
{
await dateTimePicker.ShowDatePopupAsync();
}ShowTimePopupAsync()
Opens the time picker popup to show the time selection list.
Declaration
public Task ShowTimePopupAsync()Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. |
Remarks
This method programmatically opens the time selection popup, displaying a list of available time options based on the configured step interval. The time icon is also activated to reflect the popup state. It's useful for implementing custom behaviors that need to show the time picker.
Examples
Opening the time popup programmatically:
@ref SfDateTimePicker<DateTime> dateTimePicker;
private async Task OpenTimeList()
{
await dateTimePicker.ShowTimePopupAsync();
}