Forms

TwDateTimePicker

TwDateTimePicker is a Blazor component for choosing a date and time in one input. Bind Value, set Format and Placeholder, and use PreferNativePicker on mobile.

Last updated 25 September 2026

Basic DateTime Picker

Bind SelectedDateTime for a DateTime value, or Value for a plain string.

@bind-SelectedDate (DateTime): 10/1/2026

Select a datetime

@bind-Value (string): 01/10/2026 20:41

Select a datetime

Razor

<div class="space-y-4">
    <p><b>@@bind-SelectedDate (DateTime):</b> @SelectedDateTime.ToShortDateString()</p>
    <TwDateTimePicker @bind-SelectedDateTime="SelectedDateTime" Label="Select a datetime" Class="mt-3" />
    <p><b>@@bind-Value (string):</b> @SelectedDateTimeTextValue</p>
    <TwDateTimePicker @bind-Value="SelectedDateTimeTextValue" Label="Select a datetime" Class="mt-3" />
</div>

CSHARP

@code {
    public DateTime SelectedDateTime { get; set; } = DateTime.Now;
    public string SelectedDateTimeTextValue { get; set; } = DateTime.Now.ToString("dd/MM/yyyy HH:mm");
}

Input Variants

The DatePicker supports different visual variants for the input field.

Default Variant

Outlined Variant

Filled Variant

Razor

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

CSHARP

@code {
    public DateTime SelectedDateTime { get; set; } = DateTime.Now;
    public string SelectedDateTimeTextValue { get; set; } = DateTime.Now.ToString("dd/MM/yyyy HH:mm");
}

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

Razor

<TwDateTimePicker @bind-SelectedDateTime="SelectedDateTime" @bind-Value="SelectedDateTimeTextValue" Label="Dense DateTime Picker" Dense />

CSHARP

@code {
    public DateTime SelectedDateTime { get; set; } = DateTime.Now;
    public string SelectedDateTimeTextValue { get; set; } = DateTime.Now.ToString("dd/MM/yyyy HH:mm");
}

Disabled and Readonly DateTime Picker

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

Disabled DateTime Picker

Readonly DateTime Picker

Razor

<TwDateTimePicker @bind-SelectedDateTime="SelectedDateTime" @bind-Value="SelectedDateTimeTextValue" Label="Disabled DateTime Picker" Disabled Class="mt-3" />
<TwDateTimePicker @bind-SelectedDateTime="SelectedDateTime" @bind-Value="SelectedDateTimeTextValue" Label="Readonly DateTime Picker" ReadOnly Class="mt-3" />

CSHARP

@code {
    public DateTime SelectedDateTime { get; set; } = DateTime.Now;
    public string SelectedDateTimeTextValue { get; set; } = DateTime.Now.ToString("dd/MM/yyyy HH:mm");
}

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.