Table of Contents

Class TwDateTimeRangePicker

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

Represents a date and time range picker that lets users select a start and end date/time pair from a single popover, one step at a time: the start date and time first, then the end.

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

Remarks

Has one merged trigger field like TwDateRangePicker, but its popover only ever shows one month plus one time editor at a time - like TwDateTimePicker - instead of TwDateRangePicker's two-month layout. That keeps each step small enough to use comfortably on a phone.

It's built from the same pieces as the other pickers: TwPopoverPickerComponentBase for open/close/focus-trap behavior, TwDatePickerCalendar for the calendar itself (in range mode), and TwTimePickerBody for the time editor.

While picking the end, days before the start simply render disabled rather than being picked and swapped afterward - there's no natural "swap" once start and end are two separate steps.

Constructors

TwDateTimeRangePicker() 

public TwDateTimeRangePicker()

Properties

BodyClasses

Gets or sets the CSS class names to apply to the body element of the component.

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

Property Value

string

Format

The .NET custom date/time format string used to display and parse each side of SelectedRange. Leave unset to fall back to DefaultDateTimeFormat or DefaultDateTimeFormat12Hour depending on Is12HourFormat.

[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

MaxDate

The latest selectable date (inclusive). Days after this are disabled in the calendar and rejected when typed; the Next month button is also disabled once it's reached.

[Parameter]
public DateTime? MaxDate { get; set; }

Property Value

DateTime?

MinDate

The earliest selectable date (inclusive). Days before this are disabled in the calendar and rejected when typed; the Previous month button is also disabled once it's reached.

[Parameter]
public DateTime? MinDate { get; set; }

Property Value

DateTime?

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 date/times in Value. Leave unset to fall back to DefaultRangeSeparator (default " - ").

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

Property Value

string

SelectedRange

The selected date/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. Key is always less than or equal to Value when both are set.

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

Property Value

KeyValuePair<DateTime?, DateTime?>

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<DateTime?, DateTime?>> SelectedRangeChanged { get; set; }

Property Value

EventCallback<KeyValuePair<DateTime?, DateTime?>>

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, and reclaims focus inside it after a view switch or stage change - same mechanics as OnAfterRenderAsync(bool), minus its native-picker detection (there is no native input here).

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.TwDateTimeRangePicker.DateTimeRangePickerStage.Start, re-anchors the displayed month to the current start (or falls back to MinDate/today), and stages the start's existing time-of-day (or now, if unset) into the time editor.

protected override Task OnFocusAsync()

Returns

Task

OnInitialized()

Initializes the component, seeding the displayed month and the trigger's text value.

protected override void OnInitialized()
Edit this page