Table of Contents

Class TwDateRangePicker

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

Represents a date range picker component that lets users select a start and end date from a calendar popover showing two months side by side (one on narrow/mobile screens), or by typing both dates directly.

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

Remarks

Built from the same pieces TwDatePicker is built from - TwPopoverPickerComponentBase for its open/close/focus-trap mechanics, TwDatePickerHeader/TwDatePickerBody for its panel chrome, TwDatePickerDayView (extended with range-highlighting support) for its day grids, and TwDatePickerTheme for styling - so the two pickers look and behave consistently. There is no native-picker path here: the browser's native date input has no concept of a range, so the custom popover is always used regardless of PreferNativePicker (that inherited parameter has no effect on this component). Thread safety is not guaranteed; use the component only within the Blazor UI thread.

Constructors

TwDateRangePicker() 

public TwDateRangePicker()

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 format string used to display and parse each date in SelectedRange, applied identically to both the start and the end date. Any valid pattern works here, e.g. 'MM/dd/yyyy' for US-style dates or 'dd-MM-yyyy' for a dash-separated one. Leave unset to fall back to DefaultFormat (default 'dd/MM/yyyy').

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

Property Value

string

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

Remarks

If not set, defaults to two lower-cased copies of TwBlazor.Components.TwDateRangePicker.resolvedFormat joined by TwBlazor.Components.TwDateRangePicker.resolvedRangeSeparator (e.g. "dd/mm/yyyy - dd/mm/yyyy"), so the placeholder itself communicates the exact pattern typed input is parsed against.

RangeSeparator

The separator inserted between the two dates in Value. A locale-neutral symbol (like the default, " - ") reads better than a word like "to" that would need translating for non-English users. The surrounding spaces also mean an everyday dash-containing Format like "dd-MM-yyyy" (no spaces around its own "-") doesn't collide with it when typed text is split back apart - only a Format that itself embeds " - " (spaces around a dash) would, so avoid that specific combination if you override either parameter. Leave unset to fall back to DefaultRangeSeparator.

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

Property Value

string

SelectedRange

The selected date range: Key is the start date, Value is the end date. 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 - this component swaps the two dates as needed so callers never need to sort them themselves.

[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 range's 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 year/month/day view switch - 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

OnInitialized()

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

protected override void OnInitialized()

Exceptions

ArgumentException

Thrown when Format is explicitly set to an empty string.

Edit this page