Table of Contents

Class TwTimePicker

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

Represents a time picker component that allows users to select and edit time values, supporting both 12-hour and 24-hour formats.

public class TwTimePicker : TwPopoverPickerComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent, ITwInputComponent, IAsyncDisposable
Inheritance
TwTimePicker
Implements
Inherited Members

Remarks

Use the TwTimePicker component to provide an interactive UI for selecting time values in Blazor applications. The component supports two-way binding for the selected TimeOnly value and can be configured to display time in either 12-hour (AM/PM) or 24-hour format.

Constructors

TwTimePicker()

Initializes a new instance of the TwTimePicker class.

public TwTimePicker()

Properties

Is12HourFormat

Gets or sets a value indicating whether the time should be displayed in 12-hour format.

[Parameter]
public bool Is12HourFormat { get; set; }

Property Value

bool

Remarks

Set this property to true to use 12-hour time representation (with AM/PM); otherwise, 24-hour format will be used.

Placeholder

The placeholder text to display when no time is selected.

[Parameter]
public string Placeholder { get; set; }

Property Value

string

SelectedTime

The selected time value.

[Parameter]
public TimeOnly SelectedTime { get; set; }

Property Value

TimeOnly

SelectedTimeChanged

The selected bound time value.

[Parameter]
public EventCallback<TimeOnly> SelectedTimeChanged { get; set; }

Property Value

EventCallback<TimeOnly>

Value

The string value displayed in the textbox to the user.

[Parameter]
public string? Value { get; set; }

Property Value

string

ValueChanged

The string bound value displayed in the textbox to the user.

[Parameter]
public EventCallback<string> ValueChanged { get; set; }

Property Value

EventCallback<string>

triggerInputRef

Reference to the trigger textfield's actual <input> element, supplied by derived pickers (TwDatePicker, TwTimePicker) that render a TwTextfield<T> trigger. Used by OnIconClickAsync() to focus that element directly.

protected override ElementReference? triggerInputRef { get; }

Property Value

ElementReference?

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

OnAfterRenderAsync(bool)

Determines, via PreferNativePicker or JS-based device detection, whether the browser's native time picker should be used instead of the custom popover, then re-renders if that changes the input's format/type.

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

firstRender bool

Returns

Task

Remarks

The native <input type="time"> control always renders using the device's own locale/region setting (e.g. iOS's "24-Hour Time" toggle) and cannot be forced into a specific 12/24-hour display - so auto-detection only opts into the native picker when the caller hasn't requested a specific 12-hour display via Is12HourFormat, otherwise the custom popover (which does honor it) is used instead. An explicit PreferNativePicker still always wins, since that's a deliberate opt-in that accepts the native control's device-driven format.

OnParametersSetAsync()

Method invoked when the component has received parameters from its parent in the render tree, and the incoming values have been assigned to properties.

protected override Task OnParametersSetAsync()

Returns

Task

A Task representing any asynchronous operation.

Edit this page