Interface ITimePicker

Defines the contract for TimePicker component interface that provides time selection functionality.

Namespace: Syncfusion.Blazor.Calendars

Assembly: Syncfusion.Blazor.dll

Syntax

public interface ITimePicker : IBaseComponent

Remarks

This interface extends Syncfusion.Blazor.Internal.IBaseComponent and defines all the essential properties required for implementing a TimePicker component. It includes properties for time formatting, validation, localization, styling, and user interaction control.

Examples

Implementation example of ITimePicker interface:

public class SfTimePicker : ITimePicker
{
    public bool AllowEdit { get; set; } = true;
    public string Format { get; set; } = "HH:mm";
    public DateTime Min { get; set; } = DateTime.MinValue;
    public DateTime Max { get; set; } = DateTime.MaxValue;
    // Other properties implementation...
}

Properties

AllowEdit

Gets or sets a value indicating whether the user can edit the time value directly in the input field.

Declaration

bool AllowEdit { get; set; }

Property Value

Type	Description
System.Boolean	A `bool` value that determines if direct editing is allowed. The default value is `true`.

Remarks

When set to false, the user can only select time values from the dropdown popup and cannot type directly into the input field. This property is useful for ensuring data integrity and preventing invalid time entries.

CssClass

Gets or sets the CSS class name that will be applied to the TimePicker component.

Declaration

string CssClass { get; set; }

Property Value

Type	Description
System.String	A `string` representing the CSS class name(s) to be applied to the component. The default value is `null`.

Remarks

This property allows for custom styling of the TimePicker component by applying additional CSS classes. Multiple classes can be specified by separating them with spaces.

Enabled

Gets or sets a value indicating whether the TimePicker component is enabled and interactive.

Declaration

bool Enabled { get; set; }

Property Value

Type	Description
System.Boolean	A `bool` value that determines if the component is enabled. The default value is `true`.

Remarks

When set to false, the component becomes non-interactive, cannot receive focus, and appears visually disabled. This property is useful for conditionally disabling the component based on application logic.

EnablePersistence

Gets or sets a value indicating whether the component's state should be persisted across browser sessions.

Declaration

bool EnablePersistence { get; set; }

Property Value

Type	Description
System.Boolean	A `bool` value that determines if persistence is enabled. The default value is `false`.

Remarks

When enabled, the component will maintain its state (such as selected time value) even after the browser is closed and reopened. The component state is stored in the browser's local storage.

EnableRtl

Gets or sets a value indicating whether the component should be displayed in right-to-left (RTL) mode.

Declaration

bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	A `bool` value that determines if RTL mode is enabled. The default value is `false`.

Remarks

When enabled, the component layout and text direction will be adjusted to support right-to-left languages such as Arabic, Hebrew, etc. This property is particularly useful for internationalization and localization scenarios.

FloatLabelType

Gets or sets the floating label type for the TimePicker input field.

Declaration

FloatLabelType FloatLabelType { get; set; }

Property Value

Type	Description
FloatLabelType	A FloatLabelType enumeration value that determines the floating label behavior.

Remarks

This property controls how the label text behaves in relation to the input field. Options include Auto, Always, and Never, which determine when and how the label floats above the input field.

Format

Gets or sets the time format pattern used to display and parse time values.

Declaration

string Format { get; set; }

Property Value

Type	Description
System.String	A `string` representing the time format pattern. Common formats include "HH:mm", "hh:mm tt", "HH:mm:ss".

Remarks

This property defines how time values are displayed in the input field and how user input is parsed. The format follows standard .NET DateTime format strings. For example, "HH:mm" displays 24-hour format, while "hh:mm tt" displays 12-hour format with AM/PM indicator.

HtmlAttributes

Gets or sets additional HTML attributes that will be applied to the TimePicker input element.

Declaration

object HtmlAttributes { get; set; }

Property Value

Type	Description
System.Object	An `object` containing key-value pairs of HTML attributes. The default value is `null`.

Remarks

This property allows for adding custom HTML attributes to the underlying input element. Common uses include adding data attributes, ARIA attributes for accessibility, or other custom attributes.

KeyConfigs

Gets or sets the keyboard shortcut configurations for the TimePicker component.

Declaration

object KeyConfigs { get; set; }

Property Value

Type	Description
System.Object	An `object` containing keyboard shortcut mappings. The default value is `null`.

Remarks

This property allows customization of keyboard shortcuts and key bindings for the component. It can be used to define custom key combinations for various component actions like opening the popup, navigating through time values, or confirming selections.

Locale

Gets or sets the locale identifier for internationalization and localization of the TimePicker component.

Declaration

string Locale { get; set; }

Property Value

Type	Description
System.String	A `string` representing the locale identifier (e.g., "en-US", "fr-FR", "de-DE"). The default value is based on the browser's locale.

Remarks

This property determines the language and cultural conventions used for displaying time formats, text labels, and other localizable content. The locale affects time format patterns, AM/PM indicators, and other culture-specific display elements.

Max

Gets or sets the maximum selectable time value for the TimePicker component.

Declaration

DateTime Max { get; set; }

Property Value

Type	Description
System.DateTime	A System.DateTime representing the maximum allowed time value. The default value is System.DateTime.MaxValue.

Remarks

This property restricts the time selection range by setting an upper limit. Users cannot select or enter time values that exceed this maximum value. Only the time portion of the DateTime value is considered; the date portion is ignored.

Min

Gets or sets the minimum selectable time value for the TimePicker component.

Declaration

DateTime Min { get; set; }

Property Value

Type	Description
System.DateTime	A System.DateTime representing the minimum allowed time value. The default value is System.DateTime.MinValue.

Remarks

This property restricts the time selection range by setting a lower limit. Users cannot select or enter time values that are below this minimum value. Only the time portion of the DateTime value is considered; the date portion is ignored.

Placeholder

Gets or sets the placeholder text that appears in the TimePicker input field when no time is selected.

Declaration

string Placeholder { get; set; }

Property Value

Type	Description
System.String	A `string` representing the placeholder text. The default value is `null`.

Remarks

This property provides a hint to users about the expected time format or selection. The placeholder text is displayed in a lighter color and disappears when the user focuses on the input field or selects a time.

Readonly

Gets or sets a value indicating whether the TimePicker input field is read-only.

Declaration

bool Readonly { get; set; }

Property Value

Type	Description
System.Boolean	A `bool` value that determines if the input field is read-only. The default value is `false`.

Remarks

When set to true, the input field cannot be edited directly, but users can still select time values from the dropdown popup. This property is useful when you want to restrict direct text input while still allowing time selection through the UI.

ScrollTo

Gets or sets the time value to scroll to when the TimePicker popup is opened.

Declaration

Nullable<DateTime> ScrollTo { get; set; }

Property Value

Type	Description
System.Nullable<System.DateTime>	A nullable System.DateTime representing the time to scroll to in the popup. The default value is `null`.

Remarks

This property determines the initial scroll position of the time list in the popup when it opens. If not specified, the popup will scroll to the currently selected time or the current system time. Only the time portion of the DateTime value is used; the date portion is ignored.

ShowClearButton

Gets or sets a value indicating whether the clear button is displayed in the TimePicker input field.

Declaration

bool ShowClearButton { get; set; }

Property Value

Type	Description
System.Boolean	A `bool` value that determines if the clear button is shown. The default value is `false`.

Remarks

When enabled, a clear button (usually an 'X' icon) appears in the input field, allowing users to quickly clear the selected time value. The button is only visible when there is a selected time value in the component.

Step

Gets or sets the time interval step in minutes between consecutive time values in the popup list.

Declaration

int Step { get; set; }

Property Value

Type	Description
System.Int32	An `int` representing the step interval in minutes. The default value is typically 30 minutes.

Remarks

This property controls the granularity of time values displayed in the dropdown popup. For example, a step of 15 would show times like 12:00, 12:15, 12:30, 12:45, etc. Smaller step values provide more precise time selection but result in longer dropdown lists.

StrictMode

Gets or sets a value indicating whether strict mode is enabled for time value validation.

Declaration

bool StrictMode { get; set; }

Property Value

Type	Description
System.Boolean	A `bool` value that determines if strict mode is enabled. The default value is `false`.

Remarks

When enabled, the component enforces strict validation of time input values. In strict mode, only exact time format matches are accepted, and invalid entries are automatically corrected or rejected. When disabled, the component is more lenient with input formats and attempts to parse various time representations.

Width

Gets or sets the width of the TimePicker component.

Declaration

string Width { get; set; }

Property Value

Type	Description
System.String	A `string` representing the component width in CSS units (e.g., "200px", "100%", "10em"). The default value is `null`.

Remarks

This property allows customization of the component's width to fit different layout requirements. The width can be specified in various CSS units including pixels, percentages, em, rem, etc. If not specified, the component will use its default width or adapt to its container.

ZIndex

Gets or sets the z-index CSS property value for the TimePicker popup.

Declaration

int ZIndex { get; set; }

Property Value

Type	Description
System.Int32	An `int` representing the z-index value. Higher values place the popup above elements with lower z-index values.

Remarks

This property controls the stacking order of the TimePicker popup relative to other elements on the page. It is particularly useful when the popup needs to appear above other overlapping elements or modal dialogs. The default z-index is usually set to ensure the popup appears above most page content.