Class SfTimePicker<TValue>
The TimePicker is an intuitive component that provides options to select a time value from a popup list or to set a desired time value.
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Toolkit.Calendars
Assembly: Syncfusion.Blazor.Toolkit.dll
Syntax
public class SfTimePicker<TValue> : SfInputBase<TValue>, IAsyncDisposable, IMaskPlaceholderType Parameters
| Name | Description |
|---|---|
| TValue | Specifies the type of the time value that the SfTimePicker component will handle. This can be System.DateTime, System.DateTime?, System.DateTimeOffset, System.DateTimeOffset?, System.TimeOnly, or System.TimeOnly?. |
Remarks
The TimePicker component supports various time formats, keyboard navigation, validation, localization, and accessibility features. It can work with different data types including DateTime, TimeOnly, TimeSpan, and DateTimeOffset. The component provides options for time selection through dropdown list, direct input, and keyboard interactions.
Examples
Basic usage of TimePicker component:
<SfTimePicker TValue="DateTime" @bind-Value="selectedTime" Format="HH:mm" />The following example demonstrates how to create a basic SfTimePicker component:
<SfTimePicker TValue="DateTime?" @bind-Value="@selectedTime" Placeholder="Select time"></SfTimePicker>
@code {
private DateTime? selectedTime = DateTime.Now;
}Constructors
SfTimePicker()
Declaration
public SfTimePicker()Properties
AllowEdit
Gets or sets a value indicating whether the SfTimePicker<TValue> allows users to change the value via direct typing.
Declaration
public bool AllowEdit { get; set; }Property Value
| Type | Description |
|---|---|
| System.Boolean |
|
Remarks
When set to false, users can only select time values from the popup list and cannot type directly into the input field.
This property is useful when you want to ensure that only predefined time values can be selected.
Examples
The following example shows how to disable direct typing in the TimePicker:
<SfTimePicker TValue="DateTime?" AllowEdit="false" Placeholder="Select from popup only"></SfTimePicker>Cleared
Gets or sets an event callback that is triggered when the component's value is cleared using the clear button.
Declaration
public EventCallback<ClearedEventArgs> Cleared { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<ClearedEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the clear button is clicked. The callback receives a ClearedEventArgs. |
Remarks
This event is only applicable if the ShowClearButton property is set to true.
Examples
<SfTimePicker TValue="DateTime?" ShowClearButton="true" Cleared="@OnCleared"></SfTimePicker>
@code{
private void OnCleared(ClearedEventArgs args)
{
// Your logic here
}
}Created
Gets or sets an event callback that is triggered when the component is created.
Declaration
public EventCallback<object> Created { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<System.Object> | An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the component is first rendered. |
Remarks
This event is useful for performing one-time initialization actions after the component has been rendered.
Examples
<SfTimePicker TValue="DateTime?" Created="@OnCreated"></SfTimePicker>
@code {
private void OnCreated(object args)
{
// Your logic here
}
}Destroyed
Gets or sets an event callback that is triggered when the component is destroyed.
Declaration
public EventCallback<object> Destroyed { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<System.Object> | An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the component is being removed from the DOM. |
Remarks
This event is useful for performing cleanup operations before the component is completely removed.
Examples
<SfTimePicker TValue="DateTime?" Destroyed="@OnDestroyed"></SfTimePicker>
@code{
private void OnDestroyed(object args)
{
// Your logic here
}
}EnableMask
Gets or sets a value indicating whether mask rendering is enabled in the SfTimePicker<TValue> component.
Declaration
public bool EnableMask { get; set; }Property Value
| Type | Description |
|---|---|
| System.Boolean |
|
Remarks
When the EnableMask property is enabled, it restricts users from typing unwanted characters in the input field. It allows only eligible time format characters to be typed, providing better input validation and user experience. The mask format is based on the specified Format property.
Examples
The following example demonstrates how to enable input masking:
<SfTimePicker TValue="DateTime?" EnableMask="true" Format="HH:mm" Placeholder="Enter time"></SfTimePicker>FloatLabelType
Gets or sets the floating label behavior of the SfTimePicker<TValue> that determines how the Placeholder text floats above the input field.
Declaration
public FloatLabelType FloatLabelType { get; set; }Property Value
| Type | Description |
|---|---|
| FloatLabelType | A FloatLabelType enumeration value that specifies the floating label behavior. The default value is Never. |
Remarks
The floating label behavior can be configured with the following options:
- NeverThe label never floats above the input field when the placeholder is available.
- AlwaysThe floating label always remains above the input field.
- AutoThe floating label appears above the input field when it is focused or has a value.
Examples
The following example demonstrates how to set the floating label behavior:
<SfTimePicker TValue="DateTime?" FloatLabelType="FloatLabelType.Auto" Placeholder="Select time"></SfTimePicker>Format
Gets or sets the time format pattern for displaying values in the SfTimePicker<TValue> component.
Declaration
public string Format { get; set; }Property Value
| Type | Description |
|---|---|
| System.String | A string value representing the time format pattern. The default value is based on the current culture (typically |
Remarks
The format string follows standard .NET time format patterns. Common patterns include:
Examples
The following example shows how to set a 24-hour time format:
<SfTimePicker TValue="DateTime?" Format="HH:mm" Placeholder="Select time (24h)"></SfTimePicker>FullScreen
Gets or sets a value indicating whether to enable full screen layout for the SfTimePicker<TValue> component popup on mobile devices.
Declaration
public bool FullScreen { get; set; }Property Value
| Type | Description |
|---|---|
| System.Boolean |
|
Remarks
The FullScreen property is applicable for mobile and tablet devices only. When enabled, the popup will occupy the entire screen on mobile devices, providing better usability and touch interaction on smaller screens.
Examples
The following example shows how to enable full screen mode for mobile devices:
<SfTimePicker TValue="DateTime?" FullScreen="true" Placeholder="Select time"></SfTimePicker>HtmlAttributes
Gets or sets additional HTML attributes such as styles, classes, and more to be applied to the root element of the SfTimePicker<TValue>.
Declaration
public Dictionary<string, object> HtmlAttributes { get; set; }Property Value
| Type | Description |
|---|---|
| System.Collections.Generic.Dictionary<System.String, System.Object> | A dictionary of key-value pairs representing HTML attributes. The default value is |
Remarks
Additional attributes can be added by specifying an inline attribute or by using the @attributes directive. These attributes will be applied directly to the root HTML element of the TimePicker component.
Examples
The following example shows how to add HTML attributes:
<SfTimePicker TValue="DateTime?" HtmlAttributes="@(new Dictionary<string, object> { {"class", "custom-timepicker"}, {"title", "Select time"} })"></SfTimePicker>InputAttributes
Gets or sets additional input attributes such as disabled, value, and more to be applied to the input element of the SfTimePicker<TValue>.
Declaration
public Dictionary<string, object> InputAttributes { get; set; }Property Value
| Type | Description |
|---|---|
| System.Collections.Generic.Dictionary<System.String, System.Object> | A dictionary of key-value pairs representing input attributes. The default value is an empty dictionary. |
Remarks
If you configure both a component property and an equivalent input attribute, the component considers the property value over the attribute value. These attributes are applied directly to the underlying input HTML element.
Examples
The following example shows how to add input attributes:
<SfTimePicker TValue="DateTime?" InputAttributes="@(new Dictionary<string, object> { {"maxlength", "10"}, {"autocomplete", "off"} })"></SfTimePicker>InputFormats
Gets or sets the array of input formats to be used for parsing typed time values in the SfTimePicker<TValue> component.
Declaration
public string[] InputFormats { get; set; }Property Value
| Type | Description |
|---|---|
| System.String[] | An array of strings representing the acceptable input formats for time values. The default value is |
Remarks
This property allows the SfTimePicker<TValue> to interpret typed time values using a specified array of formats. The formats can include both standard and custom time formats supported in C#. When both InputFormats and Format properties are specified, the InputFormats property takes priority for parsing. If only InputFormats is specified, parsing will be attempted using the formats provided in the array. The parsing logic prioritizes the formats in the order they are specified in the InputFormats array. If a successful parsing occurs, the SfTimePicker<TValue> updates its value accordingly. Error handling is controlled by the StrictMode property.
Examples
The following example demonstrates how to set multiple input formats for flexible time entry:
<SfTimePicker TValue="DateTime?" InputFormats='new string[] { "hh:mm", "hh mm", "hhmm", "HH:mm" }' Placeholder="Enter time"></SfTimePicker>KeyConfigs
Gets or sets the keyboard shortcut configurations for the SfTimePicker<TValue> component.
Declaration
public Dictionary<string, object> KeyConfigs { get; set; }Property Value
| Type | Description |
|---|---|
| System.Collections.Generic.Dictionary<System.String, System.Object> | A dictionary of key-value pairs representing keyboard shortcuts and their corresponding actions. The default value is |
Remarks
This property allows customization of keyboard shortcuts for various TimePicker actions. It is particularly useful when using non-standard keyboards (such as German keyboards) or when you need to override default keyboard behaviors. The dictionary keys represent the keyboard shortcuts, and the values represent the corresponding actions.
Examples
The following example shows how to customize keyboard shortcuts:
<SfTimePicker TValue="DateTime?" KeyConfigs="@keyConfig" Placeholder="Select time"></SfTimePicker>
@code {
Dictionary<string, object> keyConfig = new Dictionary<string, object>
{
{ "escape", "close" },
{ "enter", "select" }
};
}Max
Gets or sets the maximum time value that can be selected in the SfTimePicker<TValue>.
Declaration
public DateTime Max { get; set; }Property Value
| Type | Description |
|---|---|
| System.DateTime | A System.DateTime value representing the maximum selectable time. The default value is December 31, 2099, 23:59:59. |
Remarks
Time values in the popup list and user input that exceed this maximum value will be disabled or rejected. Only the time portion of the DateTime value is considered; the date portion is used for internal calculations. This property works in conjunction with the Min property to define a valid time range.
Examples
The following example shows how to restrict time selection to business hours:
<SfTimePicker TValue="DateTime?" Max="new DateTime(2023, 1, 1, 18, 0, 0)" Min="new DateTime(2023, 1, 1, 9, 0, 0)" Placeholder="Business hours only"></SfTimePicker>Min
Gets or sets the minimum time value that can be selected in the SfTimePicker<TValue>.
Declaration
public DateTime Min { get; set; }Property Value
| Type | Description |
|---|---|
| System.DateTime | A System.DateTime value representing the minimum selectable time. The value must be less than or equal to the Max value. The default value is January 1, 1900, 00:00:00. |
Remarks
Time values in the popup list and user input that are below this minimum value will be disabled or rejected. Only the time portion of the DateTime value is considered; the date portion is used for internal calculations. This property works in conjunction with the Max property to define a valid time range.
Examples
The following example shows how to set a minimum time of 9:00 AM:
<SfTimePicker TValue="DateTime?" Min="new DateTime(2023, 1, 1, 9, 0, 0)" Placeholder="Select time after 9 AM"></SfTimePicker>OnBlur
Gets or sets an event callback that is triggered when the component loses focus.
Declaration
public EventCallback<BlurEventArgs> OnBlur { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<BlurEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the component loses focus. The callback receives a BlurEventArgs. |
Remarks
This event can be used to perform actions when the user navigates away from the TimePicker component.
Examples
<SfTimePicker TValue="DateTime?" OnBlur="@OnBlur"></SfTimePicker>
@code{
private void OnBlur(BlurEventArgs args)
{
// Your logic here
}
}OnClose
Gets or sets an event callback that is triggered when the time suggestion popup is closed.
Declaration
public EventCallback<PopupEventArgs> OnClose { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<PopupEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the popup closes. The callback receives a Syncfusion.Blazor.Toolkit.Calendars.SfTimePicker`1.PopupEventArgs. |
Remarks
You can prevent the popup from closing by setting the Cancel property to true within the event handler.
Examples
<SfTimePicker TValue="DateTime?" OnClose="@PopupClose"></SfTimePicker>
@code{
private void PopupClose(PopupEventArgs args) {
args.Cancel = true;
}
}OnFocus
Gets or sets an event callback that is triggered when the component gains focus.
Declaration
public EventCallback<FocusEventArgs> OnFocus { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<FocusEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the component receives focus. The callback receives a FocusEventArgs. |
Remarks
This event is useful for performing actions when the user starts interacting with the TimePicker.
Examples
<SfTimePicker TValue="DateTime?" OnFocus="@OnFocus"></SfTimePicker>
@code{
private void OnFocus(Syncfusion.Blazor.Toolkit.Calendars.FocusEventArgs args)
{
// Your logic here
}
}OnInput
Gets or sets an event callback that is invoked when the user inputs or modifies the value in the TimePicker.
Declaration
public EventCallback<ChangeEventArgs> OnInput { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<Microsoft.AspNetCore.Components.ChangeEventArgs> | An Microsoft.AspNetCore.Components.EventCallback that receives a Microsoft.AspNetCore.Components.ChangeEventArgs containing the input value information. |
Remarks
This event is triggered on each user input as they type or modify the time value directly in the input field.
Examples
<SfTimePicker TValue="DateTime?" OnInput="@OnInput">
</SfTimePicker>
@code{
private void OnInput(ChangeEventArgs args) {
Console.WriteLine("Input value changed");
}
}OnItemRender
Gets or sets an event callback that is triggered while rendering each item in the time suggestion popup.
Declaration
public EventCallback<ItemEventArgs<TValue>> OnItemRender { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<ItemEventArgs<TValue>> | An Microsoft.AspNetCore.Components.EventCallback<> that is invoked for each list item. The callback receives an ItemEventArgs<T>. |
Remarks
This event allows for the customization of each time item, such as adding custom attributes or disabling specific times.
Examples
<SfTimePicker TValue="DateTime?" OnItemRender="@ItemRender"></SfTimePicker>
@code{
private void ItemRender(ItemEventArgs<DateTime?> args) {
Console.WriteLine(args.Text);
}
}OnOpen
Gets or sets an event callback that is triggered when the time suggestion popup is opened.
Declaration
public EventCallback<PopupEventArgs> OnOpen { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<PopupEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the popup opens. The callback receives a Syncfusion.Blazor.Toolkit.Calendars.SfTimePicker`1.PopupEventArgs. |
Remarks
You can prevent the popup from opening by setting the Cancel property to true within the event handler.
Examples
<SfTimePicker TValue="DateTime?" OnOpen="@PopupOpen"></SfTimePicker>
@code{
private void PopupOpen(PopupEventArgs args) {
args.Cancel = true;
}
}OpenOnFocus
Gets or sets a value indicating whether the SfTimePicker<TValue> popup opens automatically when the input field receives focus.
Declaration
public bool OpenOnFocus { get; set; }Property Value
| Type | Description |
|---|---|
| System.Boolean |
|
Remarks
Use this property to improve user experience by automatically showing the TimePicker popup when the user clicks or tabs into the input field. This is particularly useful for interfaces where quick access to time selection is desirable and reduces the number of clicks required to select a time.
Examples
The following example demonstrates how to enable automatic popup opening on focus:
<SfTimePicker TValue="DateTime?" OpenOnFocus="true" Placeholder="Focus to open popup"></SfTimePicker>Placeholder
Gets or sets the text that is shown as a hint or placeholder until the user focuses on or enters a value in the SfTimePicker<TValue>.
Declaration
public string Placeholder { get; set; }Property Value
| Type | Description |
|---|---|
| System.String | A string value representing the placeholder text. The default value is |
Remarks
The placeholder text behavior depends on the FloatLabelType property. When FloatLabelType is set to Auto, the placeholder text will float above the input when focused or when the field has a value.
Examples
The following example shows how to set a placeholder text:
<SfTimePicker TValue="DateTime?" Placeholder="Enter time (HH:mm)"></SfTimePicker>Readonly
Gets or sets a value indicating whether the SfTimePicker<TValue> is in read-only mode, preventing user interaction.
Declaration
public bool Readonly { get; set; }Property Value
| Type | Description |
|---|---|
| System.Boolean |
|
Remarks
When the read-only mode is enabled, users cannot edit the time value through typing or popup interaction.
The popup cannot be opened when this property is set to true.
Examples
The following example shows how to create a read-only TimePicker:
<SfTimePicker TValue="DateTime?" Readonly="true" Value="DateTime.Now"></SfTimePicker>ScrollTo
Gets or sets the initial scroll position of the time popup list in the SfTimePicker<TValue>.
Declaration
public Nullable<DateTime> ScrollTo { get; set; }Property Value
| Type | Description |
|---|---|
| System.Nullable<System.DateTime> | A nullable System.DateTime value representing the time to scroll to when the popup opens. The default value is |
Remarks
When the popup opens, it will automatically scroll to the specified time position in the list.
If the specified time is not present in the popup list (due to the Step interval), the popup will scroll to the nearest available time.
If this property is null and no value is selected, the popup will show from the beginning of the time list.
Examples
The following example shows how to set the initial scroll position to 2:00 PM:
<SfTimePicker TValue="DateTime?" ScrollTo="new DateTime(2023, 1, 1, 14, 0, 0)" Placeholder="Select time"></SfTimePicker>Selected
Gets or sets an event callback that is triggered after a time value is selected from the popup.
Declaration
public EventCallback<SelectedEventArgs<TValue>> Selected { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<SelectedEventArgs<TValue>> | An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when a value is selected. The callback receives a SelectedEventArgs<T>. |
Remarks
This event provides the selected time value and can be used to perform actions immediately after a selection is made.
Examples
<SfTimePicker TValue="DateTime?" Selected="@ValueSelected"></SfTimePicker>
@code{
private void ValueSelected(SelectedEventArgs<DateTime?> args) {
Console.WriteLine(args.Value);
}
}ShowClearButton
Gets or sets a value indicating whether the clear button is displayed in the SfTimePicker<TValue> component.
Declaration
public bool ShowClearButton { get; set; }Property Value
| Type | Description |
|---|---|
| System.Boolean |
|
Remarks
When enabled, a clear button (×) appears on the right side of the input field, allowing users to quickly clear the selected time value. The clear button is only visible when the TimePicker has a value.
Examples
The following example shows how to enable the clear button:
<SfTimePicker TValue="DateTime?" ShowClearButton="true" Placeholder="Select time"></SfTimePicker>Step
Gets or sets the time interval in minutes between adjacent time values in the SfTimePicker<TValue> popup list.
Declaration
public int Step { get; set; }Property Value
| Type | Description |
|---|---|
| System.Int32 | An integer value representing the time interval in minutes. The default value is |
Remarks
This property determines the granularity of time options available in the popup list. For example, a step of 30 minutes will show times like 12:00, 12:30, 1:00, 1:30, etc.
The step value must evenly divide 1440 (the total number of minutes in a day) to ensure uniform and predictable time entries.
Values that do not divide 1440 (for example, 25 or 90) cause time entries to drift and may omit commonly expected times. When such values are provided, they are coerced to the nearest lower valid divisor of 1440.
Examples
The following example shows how to set a 15-minute interval:
<SfTimePicker TValue="DateTime?" Step="15" Placeholder="Select time (15 min intervals)"></SfTimePicker>StrictMode
Gets or sets a value indicating whether the SfTimePicker<TValue> operates in strict mode for input validation.
Declaration
public bool StrictMode { get; set; }Property Value
| Type | Description |
|---|---|
| System.Boolean |
|
Remarks
When StrictMode is enabled, the component will automatically validate user input and reset to the previous valid value if an invalid time is entered. When disabled, invalid time values are allowed but will be highlighted with an error class, giving users visual feedback about the invalid input. This property works in conjunction with the Min and Max properties to determine valid time ranges.
Examples
The following example shows how to enable strict mode:
<SfTimePicker TValue="DateTime?" StrictMode="true" Min="new DateTime(2023, 1, 1, 9, 0, 0)" Max="new DateTime(2023, 1, 1, 17, 0, 0)" Placeholder="Business hours only"></SfTimePicker>TabIndex
Gets or sets the tab index order of the SfTimePicker<TValue> component for keyboard navigation.
Declaration
public int TabIndex { get; set; }Property Value
| Type | Description |
|---|---|
| System.Int32 | An integer value representing the tab index. The default value is |
Remarks
The TabIndex property specifies the order in which elements receive focus when the user navigates through the page using the Tab key. A higher value indicates that the element will receive focus later in the tab order.
Examples
The following example shows how to set the tab index:
<SfTimePicker TValue="DateTime?" TabIndex="1" Placeholder="Select time"></SfTimePicker>ValueChange
Gets or sets an event callback that is triggered when the value of the component is changed.
Declaration
public EventCallback<ChangeEventArgs<TValue>> ValueChange { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<ChangeEventArgs<TValue>> | An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the component's value changes. The callback receives a ChangeEventArgs<T>. |
Remarks
This event is fired when the user selects a time from the popup, or when the value is changed programmatically.
Examples
<SfTimePicker TValue="DateTime?" ValueChange="@ValueChange"></SfTimePicker>
@code{
private void ValueChange(ChangeEventArgs<DateTime?> args) {
Console.WriteLine(args.Value);
}
}Width
Gets or sets the width of the SfTimePicker<TValue> component.
Declaration
public string Width { get; set; }Property Value
| Type | Description |
|---|---|
| System.String | A string value representing the width in CSS units (px, %, em, etc.). The default value is |
Remarks
The width can be specified in various CSS units such as pixels (px), percentage (%), em, rem, etc. If not specified, the component will use its default width based on the applied theme.
Examples
The following example shows how to set the width of the TimePicker:
<SfTimePicker TValue="DateTime?" Width="300px" Placeholder="Select time"></SfTimePicker>ZIndex
Gets or sets the z-index CSS property value of the SfTimePicker<TValue> popup element.
Declaration
public int ZIndex { get; set; }Property Value
| Type | Description |
|---|---|
| System.Int32 | An integer value representing the z-index of the popup. The default value is |
Remarks
The z-index property specifies the stack order of the popup element. Higher values appear in front of elements with lower values. This property is useful when you need to ensure the TimePicker popup appears above other elements on the page, especially in complex layouts with overlapping elements.
Examples
The following example shows how to set a higher z-index for the popup:
<SfTimePicker TValue="DateTime?" ZIndex="2000" Placeholder="Select time"></SfTimePicker>Methods
BuildRenderTree(RenderTreeBuilder)
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)Parameters
| Type | Name | Description |
|---|---|---|
| Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder | __builder |
FocusAsync()
Sets focus to the TimePicker component, allowing for immediate user interaction.
Declaration
public Task FocusAsync()Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A System.Threading.Tasks.Task that represents the asynchronous operation. |
Remarks
This method programmatically brings the TimePicker into focus, making it the active element on the page.
Examples
<SfButton OnClick="@FocusTimePicker">Focus TimePicker</SfButton>
<SfTimePicker @ref="TimePickerRef" TValue="DateTime?"></SfTimePicker>
@code {
private SfTimePicker<DateTime?> TimePickerRef;
private async Task FocusTimePicker()
{
await TimePickerRef.FocusAsync();
}
}FocusOutAsync()
Removes focus from the TimePicker component if it is currently focused.
Declaration
public Task FocusOutAsync()Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A System.Threading.Tasks.Task that represents the asynchronous operation. |
Remarks
This method programmatically removes focus from the TimePicker, de-targeting it as the active element.
Examples
<SfButton OnClick="@FocusOutTimePicker">Focus Out TimePicker</SfButton>
<SfTimePicker @ref="TimePickerRef" TValue="DateTime?"></SfTimePicker>
@code {
private SfTimePicker<DateTime?> TimePickerRef;
private async Task FocusOutTimePicker()
{
await TimePickerRef.FocusOutAsync();
}
}HidePopupAsync(EventArgs)
Hides the TimePicker's popup if it is currently open.
Declaration
public Task HidePopupAsync(EventArgs args = null)Parameters
| Type | Name | Description |
|---|---|---|
| System.EventArgs | args | Specifies the optional event arguments. |
Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A System.Threading.Tasks.Task that represents the asynchronous operation. |
Remarks
This method programmatically closes the time selection popup.
Examples
<SfButton OnClick="@HidePopup">Hide Popup</SfButton>
<SfTimePicker @ref="TimePickerRef" TValue="DateTime?"></SfTimePicker>
@code {
private SfTimePicker<DateTime?> TimePickerRef;
private async Task HidePopup()
{
// You can open the popup using ShowPopupAsync() before hiding it.
await TimePickerRef.HidePopupAsync();
}
}ShowPopupAsync(EventArgs)
Opens the TimePicker's popup, which displays the list of time values.
Declaration
public Task ShowPopupAsync(EventArgs args = null)Parameters
| Type | Name | Description |
|---|---|---|
| System.EventArgs | args | Specifies the optional event arguments. |
Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A System.Threading.Tasks.Task that represents the asynchronous operation. |
Remarks
This method programmatically opens the time selection popup, which is useful for triggering the popup from external events or custom logic.
Examples
<SfButton OnClick="@ShowPopup">Show Popup</SfButton>
<SfTimePicker @ref="TimePickerRef" TValue="DateTime?"></SfTimePicker>
@code {
private SfTimePicker<DateTime?> TimePickerRef;
private async Task ShowPopup()
{
await TimePickerRef.ShowPopupAsync();
}
}UpdateChildProperties(Object)
Updates the child content properties for mask placeholder configuration.
Declaration
public void UpdateChildProperties(object maskPlaceholderValue)Parameters
| Type | Name | Description |
|---|---|---|
| System.Object | maskPlaceholderValue | An object containing mask placeholder field values, or null to use default values. |
Remarks
This method is used to configure mask placeholder settings for the TimePicker when EnableMask is true. If null is provided, default TimePickerMaskPlaceholder values are used.
Examples
var placeholders = new TimePickerMaskPlaceholder
{
Hour = "HH",
Minute = "MM",
Second = "SS"
};
timePicker.UpdateChildProperties(placeholders);