Forms

TwTimeRangePicker

TwTimeRangePicker is a Blazor component for choosing a start and end time from one popover. Bind Value or SelectedRange and set Format and Placeholder.

Last updated 25 September 2026

Basic Time Range Picker

Bind SelectedRange for a KeyValuePair<TimeOnly?, TimeOnly?> value (Key = start, Value = end). The popover reuses the same hour/minute editor as TwTimePicker, switching between the start and end with the Start/End tab at the top. Unlike the date-based range pickers, an end time earlier than the start is left as-is rather than swapped - it just represents a range that crosses midnight (e.g. an overnight shift).

@bind-SelectedRange: - - -

Select a shift

Razor

<div class="space-y-4">
    <p><b>@@bind-SelectedRange:</b> @(SelectedRange.Key?.ToString("t") ?? "-") - @(SelectedRange.Value?.ToString("t") ?? "-")</p>
    <TwTimeRangePicker Id="basic-timerangepicker" @bind-SelectedRange="SelectedRange" Label="Select a shift" Class="mt-3" />
</div>

CSHARP

@code {
    public KeyValuePair<TimeOnly?, TimeOnly?> SelectedRange { get; set; }
}

12-Hour Format

Set Is12HourFormat to display and edit the time with an AM/PM toggle instead of 24-hour time.

Select a shift

Razor

<TwTimeRangePicker Id="12hr-timerangepicker" @bind-SelectedRange="SelectedRange" Is12HourFormat Label="Select a shift" Class="mt-3" />

CSHARP

@code {
    public KeyValuePair<TimeOnly?, TimeOnly?> SelectedRange { get; set; }
}

Input Variants

The time range picker supports the same visual variants as the other text inputs.

Default Variant

Outlined Variant

Filled Variant

Razor

<div class="space-y-4">
    <TwTimeRangePicker Id="default-variant" @bind-SelectedRange="SelectedRange" Label="Default Variant" Variant="InputVariant.Default" />
    <TwTimeRangePicker Id="outlined-variant" @bind-SelectedRange="SelectedRange" Label="Outlined Variant" Variant="InputVariant.Outlined" />
    <TwTimeRangePicker Id="filled-variant" @bind-SelectedRange="SelectedRange" Label="Filled Variant" Variant="InputVariant.Filled" />
</div>

CSHARP

@code {
    public KeyValuePair<TimeOnly?, TimeOnly?> SelectedRange { get; set; }
}

Dense Time Range Picker

Set Dense for a more compact input with a smaller height and text size. Every single-line input shares the same dense height, so they line up when used side by side.

Dense Time Range Picker

Razor

<TwTimeRangePicker Id="dense-timerangepicker" @bind-SelectedRange="SelectedRange" Label="Dense Time Range Picker" Dense />

CSHARP

@code {
    public KeyValuePair<TimeOnly?, TimeOnly?> SelectedRange { get; set; }
}

Disabled and Readonly Time Range Picker

Use the Disabled and ReadOnly properties to restrict interaction with the time range picker.

Disabled Time Range Picker

Readonly Time Range Picker

Razor

<TwTimeRangePicker Id="disabled-timerangepicker" @bind-SelectedRange="SelectedRange" Label="Disabled Time Range Picker" Disabled Class="mt-3" />
<TwTimeRangePicker Id="readonly-timerangepicker" @bind-SelectedRange="SelectedRange" Label="Readonly Time Range Picker" ReadOnly Class="mt-3" />

CSHARP

@code {
    public KeyValuePair<TimeOnly?, TimeOnly?> SelectedRange { get; set; }
}