Table of Contents

Class TwTimeRangePicker

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

Represents a time range picker that lets users select a start and end time-of-day pair from a single popover, switching between the two via a Start/End tab at the top.

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

Remarks

Has one merged trigger field like TwDateTimeRangePicker/TwDateRangePicker, but reuses TwTimePickerBody - the same body TwTimePicker uses - for its actual editing surface instead of a calendar. Unlike the date-based range pickers, the two sides are edited independently and applied immediately as the hour/minute steppers change (there's no discrete "pick a day" action to hang a commit off), and typed/selected values are never reordered: an end time earlier than the start (e.g. a "22:00 - 06:00" overnight shift) is a legitimate range here, not a mistake to correct.

Constructors

TwTimeRangePicker() 

public TwTimeRangePicker()

Properties

Format

The .NET custom time format string used to display and parse each side of SelectedRange. Leave unset to fall back to 'HH:mm' (or 'hh:mm tt' when Is12HourFormat is set).

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

Property Value

string

Is12HourFormat

Gets or sets a value indicating whether the time should be displayed in 12-hour format. Has no effect when Format is explicitly set.

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

Property Value

bool

Placeholder

The placeholder text to display when no range is selected.

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

Property Value

string

RangeSeparator

The separator inserted between the two times in Value. Default " - ".

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

Property Value

string

SelectedRange

The selected time range: Key is the start, Value is the end. Either (or both) may be null - both null means no range has been started yet, and a non-null Key with a null Value means only the start has been picked so far. Unlike SelectedRange, Key is not required to be less than or equal to Value - an end time earlier than the start represents a range that crosses midnight.

[Parameter]
public KeyValuePair<TimeOnly?, TimeOnly?> SelectedRange { get; set; }

Property Value

KeyValuePair<TimeOnly?, TimeOnly?>

SelectedRangeChanged

The bound SelectedRange value; invoked whenever it changes, including after only the start has been picked (Value still null) so callers can reflect an in-progress selection.

[Parameter]
public EventCallback<KeyValuePair<TimeOnly?, TimeOnly?>> SelectedRangeChanged { get; set; }

Property Value

EventCallback<KeyValuePair<TimeOnly?, 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)

Arms the panel's Tab focus trap/background inert-ing when it first opens - same mechanics as OnAfterRenderAsync(bool). Deliberately does not move focus into the panel, same rationale as TwTimePicker: the trigger stays a text-editable combobox.

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

firstRender bool

Returns

Task

OnFocusAsync()

Re-seeds the picker's step state every time the panel opens: always starts back at TwBlazor.Components.TwTimeRangePicker.TimeRangePickerStage.Start, regardless of what was being edited last time.

protected override Task OnFocusAsync()

Returns

Task

OnInitialized()

Initializes the component, seeding the trigger's text value.

protected override void OnInitialized()
Edit this page