Class SfDateTimePicker<TValue>
The DateTimePicker is a graphical user interface component that allows the user to select or enter a date and time value.
Inheritance
Inherited Members
Namespace: Syncfusion.Blazor.Calendars
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfDateTimePicker<TValue> : SfDatePicker<TValue>, IComponent, IHandleEvent, IHandleAfterRender, IDisposableType Parameters
| Name | Description |
|---|---|
| TValue | Specifies the type of the SfDateTimePicker<TValue> component. This can be DateTime, Nullable<T>, DateTimeOffset, or Nullable<T>. |
Remarks
The SfDateTimePicker<TValue> component extends the SfDatePicker<TValue> to provide both date and time selection capabilities.
It includes a time popup list with configurable time intervals, time format options, and time range restrictions.
The component supports various data types through the generic TValue parameter and provides comprehensive validation for both date and time values.
Examples
<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);
}Basic usage of the DateTimePicker component:
<SfDateTimePicker TValue="DateTime" Value="DateTime.Now" Format="dd/MM/yyyy HH:mm">
</SfDateTimePicker>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
[Parameter]
public override DateTime Max { get; set; }Property Value
| Type | Description |
|---|---|
| DateTime | A 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
[Parameter]
public DateTime MaxTime { get; set; }Property Value
| Type | Description |
|---|---|
| DateTime | A 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
[Parameter]
public override DateTime Min { get; set; }Property Value
| Type | Description |
|---|---|
| DateTime | A 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
[Parameter]
public DateTime MinTime { get; set; }Property Value
| Type | Description |
|---|---|
| DateTime | A 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);
}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
[Parameter]
public DateTime? ScrollTo { get; set; }Property Value
| Type | Description |
|---|---|
| DateTime? | A Nullable<T> 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
[Parameter]
public int Step { get; set; }Property Value
| Type | Description |
|---|---|
| int | 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
[Parameter]
public string TimeFormat { get; set; }Property Value
| Type | Description |
|---|---|
| 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. -->TimeIcon
Gets or sets the CSS class string for the time icon displayed in the component.
Declaration
protected string? TimeIcon { get; set; }Property Value
| Type | Description |
|---|---|
| string | A string representing the CSS classes applied to the time icon. The default value is derived from TIME_ICON constant. |
Remarks
This property controls the appearance and styling of the time icon that users click to open the time selection popup. The icon's visual state can change based on user interactions and component state.
Methods
BuildRenderTree(RenderTreeBuilder)
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)Parameters
| Type | Name | Description |
|---|---|---|
| RenderTreeBuilder | __builder |
Overrides
ShowDatePopup()
Opens the date picker popup to display the calendar for date selection.
Declaration
public Task ShowDatePopup()Returns
| Type | Description |
|---|---|
| Task | A Task representing the asynchronous operation. |
Remarks
This method specifically sets the popup mode to date picker and opens the calendar popup. It provides an alternative way to open the date selection popup programmatically.
Examples
Opening the date popup:
private async Task ShowCalendar()
{
await dateTimePicker.ShowDatePopup();
}ShowDatePopupAsync()
Opens the date picker popup to show the calendar for date selection.
Declaration
public Task ShowDatePopupAsync()Returns
| Type | Description |
|---|---|
| Task | A 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 |
|---|---|
| Task | A 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();
}