menu

Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfTimePicker<TValue> - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    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
    System.Object
    SfBaseComponent
    SfInputTextBase<TValue>
    SfTimePicker<TValue>
    Inherited Members
    SfBaseComponent.Dispose()
    SfBaseComponent.Dispose(Boolean)
    SfBaseComponent.GetEffectivePlatform()
    SfBaseComponent.GetMainComponentPlatform()
    SfBaseComponent.IsMainLicenseComponent()
    SfBaseComponent.LicenseContext
    SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)
    SfBaseComponent.ValidateLicense()
    SfInputTextBase<TValue>._value
    SfInputTextBase<TValue>.APPEND
    SfInputTextBase<TValue>.APPEND_ICON
    SfInputTextBase<TValue>.ARIA_DISABLED
    SfInputTextBase<TValue>.BaseAutocomplete
    SfInputTextBase<TValue>.CLEAR_ICON_HIDE
    SfInputTextBase<TValue>.ClearElement
    SfInputTextBase<TValue>.CLEARICONHIDE
    SfInputTextBase<TValue>.ComponentReference
    SfInputTextBase<TValue>.ContainerAttr
    SfInputTextBase<TValue>.containerAttributes
    SfInputTextBase<TValue>.CONTROL_CONTAINER
    SfInputTextBase<TValue>.CONTROL_OLD_CONTAINER
    SfInputTextBase<TValue>.CssClass
    SfInputTextBase<TValue>.DataId
    SfInputTextBase<TValue>.DECREMENT
    SfInputTextBase<TValue>.DECREMENT_TITLE
    SfInputTextBase<TValue>.DecrementTitle
    SfInputTextBase<TValue>.DISABLE
    SfInputTextBase<TValue>.DISABLE_ICON
    SfInputTextBase<TValue>.DISABLED_ATTR
    SfInputTextBase<TValue>.Enabled
    SfInputTextBase<TValue>.EnablePersistence
    SfInputTextBase<TValue>.EnableRtl
    SfInputTextBase<TValue>.FLOATINPUT
    SfInputTextBase<TValue>.FloatLabel
    SfInputTextBase<TValue>.FLOATLABELBOTTOM
    SfInputTextBase<TValue>.FLOATLABELTOP
    SfInputTextBase<TValue>.FLOATTEXT
    SfInputTextBase<TValue>.GROUP_ICON
    SfInputTextBase<TValue>.ID
    SfInputTextBase<TValue>.INCREMENT
    SfInputTextBase<TValue>.INCREMENT_TITLE
    SfInputTextBase<TValue>.IncrementTitle
    SfInputTextBase<TValue>.INPUT
    SfInputTextBase<TValue>.inputAttr
    SfInputTextBase<TValue>.InputEditContext
    SfInputTextBase<TValue>.INPUTFOCUS
    SfInputTextBase<TValue>.INPUTGROUP
    SfInputTextBase<TValue>.IsClearButtonClicked
    SfInputTextBase<TValue>.IsFocused
    SfInputTextBase<TValue>.ListOfButtons
    SfInputTextBase<TValue>.MULTILINE
    SfInputTextBase<TValue>.MultilineInput
    SfInputTextBase<TValue>.OnChangeHandler(ChangeEventArgs)
    SfInputTextBase<TValue>.OnInputHandler(ChangeEventArgs)
    SfInputTextBase<TValue>.OnPasteHandler(ClipboardEventArgs)
    SfInputTextBase<TValue>.PREPEND
    SfInputTextBase<TValue>.PREPEND_ICON
    SfInputTextBase<TValue>.SetEnabled()
    SfInputTextBase<TValue>.SPACE
    SfInputTextBase<TValue>.SPIN_DOWN
    SfInputTextBase<TValue>.SPIN_UP
    SfInputTextBase<TValue>.ValidateOnInput
    SfInputTextBase<TValue>.Value
    SfInputTextBase<TValue>.ValueChanged
    SfInputTextBase<TValue>.WireClearBtnEvents()
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BlurHandler(System.String, System.Boolean)
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.ClickStopPropagation
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.ContainerClass
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.IsValueTemplate
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.MouseDowSpinnerPrevent
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.MousePreventContainer
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.OnBlur
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.OnChange
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.OnFocus
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.OnInput
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.OnPaste
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.PreventIconHandler
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.RootClass
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.SpinButton
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.ValueExpression
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.ValueTemplate
    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

    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

    Declaration
    protected override FloatLabelType BaseFloatLabelType { get; set; }
    Property Value
    Type
    FloatLabelType
    Overrides
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BaseFloatLabelType

    BaseHtmlAttributes

    Declaration
    protected override Dictionary<string, object> BaseHtmlAttributes { get; set; }
    Property Value
    Type
    System.Collections.Generic.Dictionary<System.String, System.Object>
    Overrides
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BaseHtmlAttributes

    BaseInputAttributes

    Declaration
    protected override Dictionary<string, object> BaseInputAttributes { get; set; }
    Property Value
    Type
    System.Collections.Generic.Dictionary<System.String, System.Object>
    Overrides
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BaseInputAttributes

    BaseIsReadOnlyInput

    Declaration
    protected override bool BaseIsReadOnlyInput { get; set; }
    Property Value
    Type
    System.Boolean
    Overrides
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BaseIsReadOnlyInput

    BasePlaceholder

    Declaration
    protected override string BasePlaceholder { get; set; }
    Property Value
    Type
    System.String
    Overrides
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BasePlaceholder

    BaseReadonly

    Declaration
    protected override bool BaseReadonly { get; set; }
    Property Value
    Type
    System.Boolean
    Overrides
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BaseReadonly

    BaseShowClearButton

    Declaration
    protected override bool BaseShowClearButton { get; set; }
    Property Value
    Type
    System.Boolean
    Overrides
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BaseShowClearButton

    BaseTabIndex

    Declaration
    protected override int BaseTabIndex { get; set; }
    Property Value
    Type
    System.Int32
    Overrides
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BaseTabIndex

    BaseWidth

    Declaration
    protected override string BaseWidth { get; set; }
    Property Value
    Type
    System.String
    Overrides
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.BaseWidth

    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

    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
    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 h:mm tt for en-US culture).

    Remarks

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

    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
    public bool FullScreen { get; set; }
    Property Value
    Type Description
    System.Boolean

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

    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
    public string Placeholder { get; set; }
    Property Value
    Type Description
    System.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
    public bool Readonly { get; set; }
    Property Value
    Type Description
    System.Boolean

    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
    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 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
    public bool ShowClearButton { get; set; }
    Property Value
    Type Description
    System.Boolean

    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
    public int Step { get; set; }
    Property Value
    Type Description
    System.Int32

    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
    public bool StrictMode { get; set; }
    Property Value
    Type Description
    System.Boolean

    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
    public int TabIndex { get; set; }
    Property Value
    Type Description
    System.Int32

    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
    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 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
    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 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
    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 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
    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
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.ChangeHandler(Microsoft.AspNetCore.Components.ChangeEventArgs)
    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
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.FocusHandler(Microsoft.AspNetCore.Components.Web.FocusEventArgs)
    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
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.FocusOutHandler(Microsoft.AspNetCore.Components.Web.FocusEventArgs)
    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
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.FormatValue(System.String)
    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
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.FormatValueAsString(TValue)
    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
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.InputHandler(Microsoft.AspNetCore.Components.ChangeEventArgs)
    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
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.OnAfterRenderAsync(System.Boolean)
    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
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.OnInitializedAsync()
    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
    Syncfusion.Blazor.Inputs.SfInputTextBase<TValue>.OnParametersSetAsync()
    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();
        }
    }
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved