Forms

TwDateRangePicker

TwDateRangePicker is a Blazor date range picker with a two-month calendar popup. Bind Value or SelectedRange and constrain it with MinDate and MaxDate.

Last updated 25 September 2026

Basic Date Range Picker

Bind SelectedRange for a KeyValuePair<DateTime?, DateTime?> value (Key = start, Value = end). Select a start date, then an end date - the range highlights across both calendar months and survives month navigation. Shares its theme (TwDatePickerTheme) with TwDatePicker.

@bind-SelectedRange: - - -

Select a date range

Razor

<div class="space-y-4">
    <p><b>@@bind-SelectedRange:</b> @(SelectedRange.Key?.ToShortDateString() ?? "-") - @(SelectedRange.Value?.ToShortDateString() ?? "-")</p>
    <TwDateRangePicker Id="basic-daterangepicker" @bind-SelectedRange="SelectedRange" Label="Select a date range" Class="mt-3" />
</div>

CSHARP

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

Custom Format

Format is a plain .NET custom date format string applied identically to both the start and end date - the same parameter TwDatePicker uses. The separator between the two dates defaults to " - " and is configurable via RangeSeparator.

US format (MM/dd/yyyy)

Razor

<div class="space-y-4">
    <TwDateRangePicker Id="us-format-daterangepicker" @bind-SelectedRange="SelectedRange" Format="MM/dd/yyyy" Label="US format (MM/dd/yyyy)" Class="mt-3" />
</div>

CSHARP

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

Min and Max Date

Use the MinDate and MaxDate properties to restrict the selectable range. Out-of-bounds days render disabled and the month navigation arrows stop at the boundary.

Select within the next 30 days

Razor

<TwDateRangePicker Id="bounded-daterangepicker" @bind-SelectedRange="BoundedRange" MinDate="MinDate" MaxDate="MaxDate" Label="Select within the next 30 days" Class="mt-3" />

CSHARP

@code {
    public KeyValuePair<DateTime?, DateTime?> BoundedRange { get; set; }
    public DateTime MinDate { get; set; } = DateTime.Today;
    public DateTime MaxDate { get; set; } = DateTime.Today.AddDays(30);
}

Input Variants

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

Default Variant

Outlined Variant

Filled Variant

Razor

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

CSHARP

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

Dense Date 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 Date Range Picker

Razor

<TwDateRangePicker Id="dense-daterangepicker" @bind-SelectedRange="SelectedRange" Label="Dense Date Range Picker" Dense />

CSHARP

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

Disabled and Readonly Date Range Picker

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

Disabled Date Range Picker

Readonly Date Range Picker

Razor

<TwDateRangePicker Id="disabled-daterangepicker" @bind-SelectedRange="SelectedRange" Label="Disabled Date Range Picker" Disabled Class="mt-3" />
<TwDateRangePicker Id="readonly-daterangepicker" @bind-SelectedRange="SelectedRange" Label="Readonly Date Range Picker" ReadOnly Class="mt-3" />

CSHARP

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

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwDatePickerTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Header`	string
`WeekdaysHeader`	string
`Base`	string
`ActiveClass`	string
`ButtonClass`	string
`RangeClass`	string
`RangeMonthCaptionClass`	string
`PrevMonthClass`	string
`DefaultFormat`	string
`DefaultDateTimeFormat`	string
`DefaultDateTimeFormat12Hour`	string
`DefaultRangeSeparator`	string
`IconTriggerWrapper`	string
`IconGlyph`	string
`TextfieldPadding`	string
`NativeInputAppearance`	string
`PanelWidth`	string
`HeaderControls`	string
`Body`	string
`YearsGrid`	string
`MonthsGrid`	string
`DualMonthLayout`	string
`DualMonthColumn`	string
`DayGrid`	string
`DayHeaderCellPadding`	string
`DayAbbreviation`	string
`RangeStageTabsContainer`	string
`RangeStageTabInactive`	string
`PanelMaxHeight`	string
`PanelMaxWidth`	string
`DualMonthPanelWidth`	string
`StageTabBase`	string
`HeaderNavButton`	string

Full reference: TwDatePickerTheme on the API docs.