Forms

TwDateTimeRangePicker

TwDateTimeRangePicker is a Blazor component for choosing a start and end date and time from one popover. Bind Value, set MinDate, MaxDate and Format.

Last updated 25 September 2026

Basic DateTime Range Picker

Bind SelectedRange for a KeyValuePair<DateTime?, DateTime?> value (Key = start, Value = end). Unlike TwDateRangePicker's two-month popover, this shows one month plus a time editor at a time: pick the start date and time first, then the panel automatically moves on to the end - small enough to comfortably use on a phone. Shares its theme (TwDatePickerTheme) with TwDatePicker and TwDateRangePicker.

@bind-SelectedRange: - - -

Select a stay

Razor

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

CSHARP

@code {
    public KeyValuePair<DateTime?, DateTime?> 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 stay

Razor

<TwDateTimeRangePicker Id="12hr-datetimerangepicker" @bind-SelectedRange="SelectedRange" Is12HourFormat Label="Select a stay" Class="mt-3" />

CSHARP

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

Min and Max Date

Use the MinDate and MaxDate properties to restrict the selectable range. While picking the end date, days before the already-picked start are disabled too, so the end can never land before it.

Select within the next 30 days

Razor

<TwDateTimeRangePicker Id="bounded-datetimerangepicker" @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 datetime range picker supports the same visual variants as the other text inputs.

Default Variant

Outlined Variant

Filled Variant

Razor

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

CSHARP

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

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

Razor

<TwDateTimeRangePicker Id="dense-datetimerangepicker" @bind-SelectedRange="SelectedRange" Label="Dense DateTime Range Picker" Dense />

CSHARP

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

Disabled and Readonly DateTime Range Picker

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

Disabled DateTime Range Picker

Readonly DateTime Range Picker

Razor

<TwDateTimeRangePicker Id="disabled-datetimerangepicker" @bind-SelectedRange="SelectedRange" Label="Disabled DateTime Range Picker" Disabled Class="mt-3" />
<TwDateTimeRangePicker Id="readonly-datetimerangepicker" @bind-SelectedRange="SelectedRange" Label="Readonly DateTime 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.