This class serves as a complete configuration model for TimePicker components, encapsulating all properties related to appearance, behavior, validation, time selection, and event handling. It provides strongly-typed access to all TimePicker features including time interval settings, format customization, popup behavior, and accessibility features. The model supports both programmatic configuration and data binding scenarios for comprehensive time input functionality.

Examples

<SfTimePicker TValue="DateTime?" @bind-Value="@Model.Value"
             Format="@Model.Format" Step="@Model.Step"
             ShowClearButton="@Model.ShowClearButton">
    <TimePickerEvents TValue="DateTime?" 
                     ValueChange="@Model.Change"
                     ItemRender="@Model.ItemRender">
    </TimePickerEvents>
</SfTimePicker>

@code {
    TimePickerModel<DateTime?> Model = new TimePickerModel<DateTime?>
    {
        Format = "HH:mm",
        Step = 30, // 30-minute intervals
        ShowClearButton = true,
        AllowEdit = false // Picker-only mode
    };

    void OnItemRender(ItemEventArgs<DateTime?> args)
    {
        // Custom item rendering logic
        if (args.Value?.Hour < 9 || args.Value?.Hour > 17)
        {
            args.IsDisabled = true; // Disable outside business hours
        }
    }
}

Constructors

TimePickerModel()

Declaration

public TimePickerModel()

Properties

AllowEdit

Specifies a boolean value whether the TimePicker allows user to change the value via typing. When set as false, the TimePicker allows user to change the value via picker only.

Declaration

[JsonPropertyName("allowEdit")]
public bool AllowEdit { get; set; }

Property Value

Type
bool

Blur

Triggers when the input loses the focus.

Declaration

[JsonIgnore]
[JsonPropertyName("blur")]
public EventCallback<object> Blur { get; set; }

Property Value

Type
EventCallback<object>

Change

Triggers when the time value is changed.

Declaration

[JsonIgnore]
[JsonPropertyName("change")]
public EventCallback<object> Change { get; set; }

Property Value

Type
EventCallback<object>

Cleared

Triggers when TimePicker value is cleared using clear button.

Declaration

[JsonIgnore]
[JsonPropertyName("cleared")]
public EventCallback<object> Cleared { get; set; }

Property Value

Type
EventCallback<object>

Close

Triggers when the popup is closed.

Declaration

[JsonIgnore]
[JsonPropertyName("close")]
public EventCallback<object> Close { get; set; }

Property Value

Type
EventCallback<object>

Created

Triggers when the TimePicker is created.

Declaration

[JsonIgnore]
[JsonPropertyName("created")]
public EventCallback<object> Created { get; set; }

Property Value

Type
EventCallback<object>

CssClass

Specifies the CSS class name that can be appended with the root element of the TimePicker. One or more custom CSS classes can be added to a TimePicker.

Declaration

[JsonPropertyName("cssClass")]
public string CssClass { get; set; }

Property Value

Type
string

Destroyed

Triggers when the TimePicker is destroyed.

Declaration

[JsonIgnore]
[JsonPropertyName("destroyed")]
public EventCallback<object> Destroyed { get; set; }

Property Value

Type
EventCallback<object>

EnablePersistence

Enable or disable persisting TimePicker's state between page reloads. If enabled, the Value state will be persisted.

Declaration

[JsonPropertyName("enablePersistence")]
public bool EnablePersistence { get; set; }

Property Value

Type
bool

EnableRtl

Enable or disable rendering TimePicker in right to left direction.

Declaration

[JsonPropertyName("enableRtl")]
public bool EnableRtl { get; set; }

Property Value

Type
bool

Enabled

Specifies a boolean value that indicates whether the TimePicker allows the user to interact with it.

Declaration

[JsonPropertyName("enabled")]
public bool Enabled { get; set; }

Property Value

Type
bool

FloatLabelType

Specifies the floating label behavior of the TimePicker that the placeholder text floats above the TimePicker based on the following values.

Possible values are:

NeverNever floats the label in the TimePicker when the placeholder is available.
AlwaysThe floating label always floats above the TimePicker.
AutoThe floating label floats above the TimePicker after focusing it or when enters the value in it.

Declaration

[JsonPropertyName("floatLabelType")]
public FloatLabelType FloatLabelType { get; set; }

Property Value

Type
FloatLabelType

Focus

Triggers when the input gets focus.

Declaration

[JsonIgnore]
[JsonPropertyName("focus")]
public EventCallback<object> Focus { get; set; }

Property Value

Type
EventCallback<object>

Format

Specifies the format of the value that to be displayed in TimePicker.

By default, the format is based on the culture.

Declaration

[JsonPropertyName("format")]
public string Format { get; set; }

Property Value

Type
string

HtmlAttributes

You can add the additional input attributes such as disabled, value, and more to the root element.

If you configured both the property and equivalent input attribute, then the TimePicker considers the property value.

Declaration

[JsonPropertyName("htmlAttributes")]
public object HtmlAttributes { get; set; }

Property Value

Type
object

ItemRender

Triggers while rendering the each popup list item.

Declaration

[JsonIgnore]
[JsonPropertyName("itemRender")]
public EventCallback<object> ItemRender { get; set; }

Property Value

Type
EventCallback<object>

KeyConfigs

Customizes the key actions in TimePicker. For example, when using German keyboard, the key actions can be customized using these shortcuts.

Declaration

[JsonPropertyName("keyConfigs")]
public object KeyConfigs { get; set; }

Property Value

Type
object

Locale

Specifies the global culture and localization of the TimePicker.

Declaration

[JsonPropertyName("locale")]
public string Locale { get; set; }

Property Value

Type
string

Max

Gets or sets the maximum time value that can be allowed to select in TimePicker.

Declaration

[JsonPropertyName("max")]
public DateTime Max { get; set; }

Property Value

Type
DateTime

Min

Gets or sets the minimum time value that can be allowed to select in TimePicker.

Declaration

[JsonPropertyName("min")]
public DateTime Min { get; set; }

Property Value

Type
DateTime

Open

Triggers when the popup is opened.

Declaration

[JsonIgnore]
[JsonPropertyName("open")]
public EventCallback<object> Open { get; set; }

Property Value

Type
EventCallback<object>

Placeholder

Specifies the text that is shown as a hint or placeholder until the user focuses or enter a value in TimePicker. The property is depending on the FloatLabelType property.

Declaration

[JsonPropertyName("placeholder")]
public string Placeholder { get; set; }

Property Value

Type
string

Readonly

Specifies a boolean value whether the TimePicker allows the user to change the text.

Declaration

[JsonPropertyName("readonly")]
public bool Readonly { get; set; }

Property Value

Type
bool

ScrollTo

Specifies the scroll bar position, if there is no value is selected in the popup list or the given value is not present in the popup list.

Declaration

[JsonPropertyName("scrollTo")]
public DateTime ScrollTo { get; set; }

Property Value

Type
DateTime

ShowClearButton

Specifies whether to show or hide the clear icon.

Declaration

[JsonPropertyName("showClearButton")]
public bool ShowClearButton { get; set; }

Property Value

Type
bool

Step

Specifies the time interval between the two adjacent time values in the popup list.

Declaration

[JsonPropertyName("step")]
public int Step { get; set; }

Property Value

Type
int

StrictMode

Specifies the TimePicker to act as strict. So that, it allows to enter only a valid time value within a specified range or else it will resets to previous value.

By default, StrictMode is in false. It allows invalid or out-of-range time value with highlighted error class.

Declaration

[JsonPropertyName("strictMode")]
public bool StrictMode { get; set; }

Property Value

Type
bool

Value

Gets or sets the value of the TimePicker. The value is parsed based on the culture specific time format.

Declaration

[JsonPropertyName("value")]
public T Value { get; set; }

Property Value

Type
T

Width

Specifies the width of the TimePicker component.

Declaration

[JsonPropertyName("width")]
public object Width { get; set; }

Property Value

Type
object

ZIndex

specifies the z-index value of the timePicker popup element.

Declaration

[JsonPropertyName("zIndex")]
public int ZIndex { get; set; }

Property Value

Type
int