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.
Inherited Members
Namespace: Syncfusion.Blazor.Calendars
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfTimePicker<TValue> : SfInputTextBase<TValue>, IMaskPlaceholder
Type 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 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
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>
BaseFloatLabelType
Declaration
protected override FloatLabelType BaseFloatLabelType { get; set; }
Property Value
Type |
---|
FloatLabelType |
Overrides
BaseHtmlAttributes
Declaration
protected override Dictionary<string, object> BaseHtmlAttributes { get; set; }
Property Value
Type |
---|
System.Collections.Generic.Dictionary<System.String, System.Object> |
Overrides
BaseInputAttributes
Declaration
protected override Dictionary<string, object> BaseInputAttributes { get; set; }
Property Value
Type |
---|
System.Collections.Generic.Dictionary<System.String, System.Object> |
Overrides
BaseIsReadOnlyInput
Declaration
protected override bool BaseIsReadOnlyInput { get; set; }
Property Value
Type |
---|
System.Boolean |
Overrides
BasePlaceholder
Declaration
protected override string BasePlaceholder { get; set; }
Property Value
Type |
---|
System.String |
Overrides
BaseReadonly
Declaration
protected override bool BaseReadonly { get; set; }
Property Value
Type |
---|
System.Boolean |
Overrides
BaseShowClearButton
Declaration
protected override bool BaseShowClearButton { get; set; }
Property Value
Type |
---|
System.Boolean |
Overrides
BaseTabIndex
Declaration
protected override int BaseTabIndex { get; set; }
Property Value
Type |
---|
System.Int32 |
Overrides
BaseWidth
Declaration
protected override string BaseWidth { get; set; }
Property Value
Type |
---|
System.String |
Overrides
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>
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>
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. 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
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>
TimePickerEditContext
Gets or sets the edit context of the TimePicker component for form validation integration.
Declaration
protected EditContext TimePickerEditContext { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.Forms.EditContext | An Microsoft.AspNetCore.Components.Forms.EditContext instance that provides validation context for the TimePicker. The default value is |
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
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 |
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 |
---|---|---|
Microsoft.AspNetCore.Components.ChangeEventArgs | args | The change event arguments containing the new value. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.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 |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.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 |
---|---|
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();
}
}
FocusHandler(FocusEventArgs)
Handles the focus event when the TimePicker input receives focus.
Declaration
protected override Task FocusHandler(FocusEventArgs args)
Parameters
Type | Name | Description |
---|---|---|
Microsoft.AspNetCore.Components.Web.FocusEventArgs | args | The focus event arguments. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.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 |
---|---|
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();
}
}
FocusOutHandler(FocusEventArgs)
Handles the focus out (blur) event when the TimePicker loses focus.
Declaration
protected override Task FocusOutHandler(FocusEventArgs args)
Parameters
Type | Name | Description |
---|---|---|
Microsoft.AspNetCore.Components.Web.FocusEventArgs | args | The focus event arguments. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.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 |
---|---|---|
System.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 |
---|---|
System.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 |
---|---|
System.Threading.Tasks.Task<System.String> | A System.Threading.Tasks.Task<> 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 |
---|---|---|
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();
}
}
InputHandler(ChangeEventArgs)
Handles input changes in the TimePicker input field.
Declaration
protected override Task InputHandler(ChangeEventArgs args)
Parameters
Type | Name | Description |
---|---|---|
Microsoft.AspNetCore.Components.ChangeEventArgs | args | The change event arguments containing the new input value. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.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(Boolean)
Triggers after the component has been rendered in the DOM.
Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type | Name | Description |
---|---|---|
System.Boolean | firstRender | true if this is the first time the component is being rendered; otherwise, false. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.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 |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.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 |
---|---|
System.Threading.Tasks.Task | A System.Threading.Tasks.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 |
---|---|---|
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();
}
}