Class SfTimePicker<TValue>

The SfTimePicker is an intuitive component which provides options to select a time value from a popup list or to set a desired time value through direct input.

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

Specifies the type of the time value that the SfTimePicker component will handle. This can be DateTime, DateTime?, DateTimeOffset, DateTimeOffset?, TimeOnly, or TimeOnly?.
Remarks

The SfTimePicker component inherits from SfInputTextBase<TValue> and provides a comprehensive time selection interface. It supports various time formats, input validation, keyboard navigation, and localization features. The component can be configured to restrict time selection within specific ranges and supports both popup-based selection and direct text input.

Examples

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;
}

Basic usage of TimePicker component:

<SfTimePicker TValue="DateTime" @bind-Value="selectedTime" Format="HH:mm" />

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
[Parameter]
public bool AllowEdit { get; set; }
Property Value
Type Description
bool

true if the TimePicker allows users to change the value via typing; otherwise, false to restrict users to picker-only selection. The default value is true.
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>

BaseFloatLabelType

Gets or sets the floating label behavior of the input component that determines how the placeholder text is displayed.

Declaration
protected override FloatLabelType BaseFloatLabelType { get; set; }
Property Value
Type Description
FloatLabelType

A FloatLabelType enumeration value that specifies the floating label behavior. The default value depends on the specific input component implementation.
Overrides
Remarks

The floating label behavior controls how the placeholder text is presented to the user:

  • NeverThe label never floats and remains as a standard placeholder text within the input field.
  • AlwaysThe label is always positioned above the input field, providing a consistent visual layout.
  • AutoThe label dynamically floats above the input field when the component receives focus or contains a value, creating an animated transition effect.

BaseHtmlAttributes

Gets or sets additional HTML attributes to be applied to the input component's container element.

Declaration
protected override Dictionary<string, object> BaseHtmlAttributes { get; set; }
Property Value
Type Description
Dictionary<string, object>

A Dictionary<TKey, TValue> containing key-value pairs of HTML attributes, or null if no additional attributes are specified.
Overrides
Remarks

Use this property to add custom HTML attributes such as data attributes, accessibility attributes, or styling classes to the component's container. Common attributes like 'class', 'style', and 'title' are handled specially and may be applied to different elements within the component structure.

BaseInputAttributes

Gets or sets additional HTML attributes to be applied specifically to the input element itself.

Declaration
protected override Dictionary<string, object> BaseInputAttributes { get; set; }
Property Value
Type Description
Dictionary<string, object>

A Dictionary<TKey, TValue> containing key-value pairs of HTML attributes. The default value is an empty dictionary.
Overrides
Remarks

This property allows direct customization of the underlying input element with additional HTML attributes. Attributes set here will be applied directly to the input tag, enabling fine-grained control over input behavior and appearance.

BaseIsReadOnlyInput

Gets or sets a value indicating whether the input element itself should be marked as read-only.

Declaration
protected override bool BaseIsReadOnlyInput { get; set; }
Property Value
Type Description
bool

true if the input element is read-only; otherwise, false. The default value depends on the specific input component implementation.
Overrides
Remarks

This property specifically controls the read-only attribute on the underlying HTML input element, which may behave differently from the component-level BaseReadonly property.

BasePlaceholder

Gets or sets the placeholder text displayed in the input when no value is present.

Declaration
protected override string BasePlaceholder { get; set; }
Property Value
Type Description
string

A string representing the placeholder text, or null if no placeholder is specified.
Overrides
Remarks

The placeholder provides a hint to users about the expected input format or content. This text is automatically hidden when the input receives focus or contains a value.

BaseReadonly

Gets or sets a value indicating whether the input component is in read-only mode.

Declaration
protected override bool BaseReadonly { get; set; }
Property Value
Type Description
bool

true if the input is read-only; otherwise, false. The default value depends on the specific input component implementation.
Overrides
Remarks

When in read-only mode, users can view and select the content but cannot modify it. The input will still receive focus and trigger events, but user input will be prevented.

BaseShowClearButton

Gets or sets a value indicating whether a clear button should be displayed to allow users to quickly clear the input value.

Declaration
protected override bool BaseShowClearButton { get; set; }
Property Value
Type Description
bool

true if the clear button should be shown; otherwise, false. The default value depends on the specific input component implementation.
Overrides
Remarks

When enabled, a clear button appears within the input field when it contains a value, allowing users to quickly clear the content. The button is automatically hidden when the input is empty, disabled, or read-only.

BaseTabIndex

Gets or sets the tab index of the input component for keyboard navigation.

Declaration
protected override int BaseTabIndex { get; set; }
Property Value
Type Description
int

An integer representing the tab order. Positive values indicate the explicit tab order, 0 means the element is focusable in document order, and negative values remove the element from tab navigation.
Overrides
Remarks

This property controls the order in which the component receives focus during keyboard navigation. When the component is disabled, the tab index is automatically set to -1 to remove it from the tab sequence.

BaseWidth

Gets or sets the width of the input component.

Declaration
protected override string BaseWidth { get; set; }
Property Value
Type Description
string

A string representing the width in CSS units (e.g., "100px", "50%"), or null to use the default width.
Overrides
Remarks

This property accepts any valid CSS width value including pixels, percentages, em units, etc. The width is applied to the component's container element to control the overall size.

EnableMask

Gets or sets a value indicating whether mask rendering is enabled in the SfTimePicker<TValue> component.

Declaration
[Parameter]
public bool EnableMask { get; set; }
Property Value
Type Description
bool

true if the component renders with input mask formatting; otherwise, false. The default value is false.
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
[Parameter]
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
[Parameter]
public string Format { get; set; }
Property Value
Type Description
string

A string value representing the time format pattern. The default value is based on the current culture (typically h:mm tt for en-US culture).
Remarks

The format string follows standard .NET time format patterns. Common patterns include:

  • h:mm tt - 12-hour format with AM/PM (e.g., 2:30 PM)
  • HH:mm - 24-hour format (e.g., 14:30)
  • h:mm:ss tt - 12-hour format with seconds
  • HH:mm:ss - 24-hour format with seconds
If not specified, the component uses the default format based on the current culture.
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
[Parameter]
public bool FullScreen { get; set; }
Property Value
Type Description
bool

true to enable full screen layout for popup on mobile devices; otherwise, false. The default value is false.
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
[Parameter]
public Dictionary<string, object> HtmlAttributes { get; set; }
Property Value
Type Description
Dictionary<string, object>

A dictionary of key-value pairs representing HTML attributes. The default value is null.
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
[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object> InputAttributes { get; set; }
Property Value
Type Description
Dictionary<string, 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
[Parameter]
public string[] InputFormats { get; set; }
Property Value
Type Description
string[]

An array of strings representing the acceptable input formats for time values. The default value is null.
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
[Parameter]
public Dictionary<string, object> KeyConfigs { get; set; }
Property Value
Type Description
Dictionary<string, object>

A dictionary of key-value pairs representing keyboard shortcuts and their corresponding actions. The default value is null.
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
[Parameter]
public DateTime Max { get; set; }
Property Value
Type Description
DateTime

A 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
[Parameter]
public DateTime Min { get; set; }
Property Value
Type Description
DateTime

A 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>

OpenOnFocus

Gets or sets a value indicating whether the SfTimePicker<TValue> popup opens automatically when the input field receives focus.

Declaration
[Parameter]
public bool OpenOnFocus { get; set; }
Property Value
Type Description
bool

true if the TimePicker popup should open on input focus; otherwise, false. The default value is false.
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
[Parameter]
public string Placeholder { get; set; }
Property Value
Type Description
string

A string value representing the placeholder text. The default value is null.
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
[Parameter]
public bool Readonly { get; set; }
Property Value
Type Description
bool

true if the TimePicker value cannot be edited; otherwise, false. The default value is false.
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
[Parameter]
public DateTime? ScrollTo { get; set; }
Property Value
Type Description
DateTime?

A nullable DateTime value representing the time to scroll to when the popup opens. The default value is null.
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>

ShowClearButton

Gets or sets a value indicating whether the clear button is displayed in the SfTimePicker<TValue> component.

Declaration
[Parameter]
public bool ShowClearButton { get; set; }
Property Value
Type Description
bool

true if the clear button is displayed; otherwise, false. The default value is false.
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
[Parameter]
public int Step { get; set; }
Property Value
Type Description
int

An integer value representing the time interval in minutes. The default value is 30.
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. A smaller step value provides more time options, while a larger step value provides fewer options. The step value should be a positive integer and a divisor of 1440 (total minutes in a day) for optimal results.

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
[Parameter]
public bool StrictMode { get; set; }
Property Value
Type Description
bool

true if the component should only allow valid time values within the specified range and reset invalid entries to the previous value; otherwise, false to allow invalid or out-of-range time values with error highlighting. The default value is false.
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
[Parameter]
public int TabIndex { get; set; }
Property Value
Type Description
int

An integer value representing the tab index. The default value is 0.
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>

TimePickerEditContext

Gets or sets the edit context of the TimePicker component for form validation integration.

Declaration
[CascadingParameter]
protected EditContext? TimePickerEditContext { get; set; }
Property Value
Type Description
EditContext

An EditContext instance that provides validation context for the TimePicker. The default value is null.
Remarks

This property is automatically populated when the TimePicker is used within a Blazor EditForm component. It enables the TimePicker to participate in form validation and track field state changes.

Width

Gets or sets the width of the SfTimePicker<TValue> component.

Declaration
[Parameter]
public string Width { get; set; }
Property Value
Type Description
string

A string value representing the width in CSS units (px, %, em, etc.). The default value is null.
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
[Parameter]
public int ZIndex { get; set; }
Property Value
Type Description
int

An integer value representing the z-index of the popup. The default value is 1000.
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
RenderTreeBuilder __builder
Overrides

ChangeHandler(ChangeEventArgs)

Handles change events from the input field when the user modifies the value.

Declaration
protected override Task ChangeHandler(ChangeEventArgs args)
Parameters
Type Name Description
ChangeEventArgs args

The change event arguments containing the new value.
Returns
Type Description
Task

A Task representing the asynchronous change handling operation.
Overrides
Remarks

This override processes value changes from the input field and delegates to the KeyHandler method for further processing and validation.

CreateMask()

Creates and configures the input mask for the TimePicker when EnableMask is true.

Declaration
protected Task CreateMask()
Returns
Type Description
Task

A Task representing the asynchronous mask creation operation.
Remarks

This method initializes the client-side masking functionality, retrieves mask values from JavaScript, and updates the current value string and mask format accordingly. It's called when mask configuration changes or needs to be refreshed.

FocusAsync()

Sets focus to the TimePicker component, allowing for immediate user interaction.

Declaration
public Task FocusAsync()
Returns
Type Description
Task

A 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();
    }
}

FocusHandler(FocusEventArgs)

Handles the focus event when the TimePicker input receives focus.

Declaration
protected override Task FocusHandler(FocusEventArgs args)
Parameters
Type Name Description
FocusEventArgs args

The focus event arguments.
Returns
Type Description
Task

A Task representing the asynchronous focus handling operation.
Overrides
Remarks

This override manages focus behavior including mask value display, text selection, float label adjustments, and optional popup opening based on OpenOnFocus setting. It also triggers the Focus event for subscribers.

FocusOutAsync()

Removes focus from the TimePicker component if it is currently focused.

Declaration
public Task FocusOutAsync()
Returns
Type Description
Task

A 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();
    }
}

FocusOutHandler(FocusEventArgs)

Handles the focus out (blur) event when the TimePicker loses focus.

Declaration
protected override Task FocusOutHandler(FocusEventArgs args)
Parameters
Type Name Description
FocusEventArgs args

The focus event arguments.
Returns
Type Description
Task

A Task representing the asynchronous focus out handling operation.
Overrides
Remarks

This override manages blur behavior including mask value processing, strict mode updates, popup closing, validation updates, and float label adjustments. It also triggers the Blur event.

FormatValue(string?)

Converts a string input value to the strongly-typed TValue format.

Declaration
protected override TValue FormatValue(string? genericValue = null)
Parameters
Type Name Description
string genericValue

The string value to parse and convert.
Returns
Type Description
TValue

The parsed value as TValue type, or default if parsing fails.
Overrides
Remarks

This override handles parsing of time strings into various TValue types (DateTime, TimeOnly, TimeSpan, DateTimeOffset). It supports multiple input formats, strict mode validation, and maintains proper state for invalid inputs. The method also handles TimeSpan-specific formatting and culture-specific input processing.

FormatValueAsString(TValue)

Formats the given value as a string for display in the input field.

Declaration
protected override string FormatValueAsString(TValue formatValue)
Parameters
Type Name Description
TValue formatValue

The value to format as a string.
Returns
Type Description
string

A formatted string representation of the value for display purposes.
Overrides
Remarks

This override handles time-specific formatting, strict mode validation, and maintains the current input value state. It applies min/max updates in strict mode and manages the strict value for invalid inputs during focused validation.

GetPersistDataAsync()

Retrieves the properties to be maintained in the component's persisted state.

Declaration
public Task<string> GetPersistDataAsync()
Returns
Type Description
Task<string>

A Task<TResult> that represents the asynchronous operation. The task result contains the persisted data as a JSON string.
Remarks

This method is used to retrieve the component's current state for persistence. It is typically used in scenarios where the application needs to save and restore the component's state across page loads or sessions.

HidePopupAsync(EventArgs)

Hides the TimePicker's popup if it is currently open.

Declaration
public Task HidePopupAsync(EventArgs args = null)
Parameters
Type Name Description
EventArgs args

Specifies the optional event arguments.
Returns
Type Description
Task

A 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();
    }
}

InputHandler(ChangeEventArgs)

Handles input changes in the TimePicker input field.

Declaration
protected override Task InputHandler(ChangeEventArgs args)
Parameters
Type Name Description
ChangeEventArgs args

The change event arguments containing the new input value.
Returns
Type Description
Task

A Task representing the asynchronous input handling operation.
Overrides
Remarks

This override processes input field changes, updates the current value string when masking is disabled, and marks the input as potentially invalid for validation purposes.

OnAfterRenderAsync(bool)

Triggers after the component has been rendered in the DOM.

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
bool firstRender

true if this is the first time the component is being rendered; otherwise, false.
Returns
Type Description
Task

A Task representing the asynchronous post-render operations.
Overrides
Remarks

This method handles post-render operations such as popup rendering, persistence data loading, and firing the Created event. On first render, it also handles local storage persistence and initializes component state. This is part of the Blazor component lifecycle.

Examples

This method is automatically called by Blazor after each render cycle:

// First render: firstRender = true
// Subsequent renders: firstRender = false

OnInitializedAsync()

Triggers during the initial rendering of the component and performs essential initialization.

Declaration
protected override Task OnInitializedAsync()
Returns
Type Description
Task

A Task representing the asynchronous initialization operation.
Overrides
Remarks

This method initializes the component's core properties, sets up CSS classes, configures culture settings, generates component ID if not provided, and establishes parent-child relationships. It's called once when the component is first created.

Examples

This method is automatically called by the Blazor framework during component lifecycle. No manual invocation is required.

OnParametersSetAsync()

Triggers when the component parameters are set or changed dynamically during the component lifecycle.

Declaration
protected override Task OnParametersSetAsync()
Returns
Type Description
Task

A Task representing the asynchronous parameter processing operation.
Overrides
Remarks

This method is called whenever component parameters change. It updates internal state, processes property changes, updates CSS classes, handles validation, and ensures the component reflects the new parameter values. It's part of the Blazor component lifecycle and is called after OnInitializedAsync.

Examples

This method is automatically invoked by Blazor when parameters change:

// When parent component changes TimePicker parameters
<SfTimePicker @bind-Value="timeValue" Format="@currentFormat" Enabled="@isEnabled" />

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
EventArgs args

Specifies the optional event arguments.
Returns
Type Description
Task

A 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();
    }
}

Implements