Forms

TwDatePicker

TwDatePicker is a Blazor date picker component with a calendar popup. Bind Value, set MinDate, MaxDate, Format and Placeholder, or use the native input.

Last updated 25 September 2026

Basic Date Picker

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

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

Select a datetime

@bind-Value (string): 10/1/2026

Select a datetime

Razor

<div class="space-y-4">
    <p><b>@@bind-SelectedDate (DateTime):</b> @SelectedDate.ToShortDateString()</p>
    <TwDatePicker Id="basic-datepicker" @bind-SelectedDate="SelectedDate" Label="Select a datetime" Class="mt-3" />
    <p><b>@@bind-Value (string):</b> @SelectedDateTextValue</p>
    <TwDatePicker Id="basic-datepicker-string" @bind-Value="SelectedDateTextValue" Label="Select a datetime" Class="mt-3" />
</div>

CSHARP

@code {
    public DateTime SelectedDate { get; set; } = DateTime.Now;
    public string SelectedDateTextValue { get; set; } = DateTime.Now.ToShortDateString();
}

Custom Format

Format accepts any .NET custom date format string and is used for both display and for parsing what's typed - the placeholder updates to match automatically. Use it for US-style month-first dates, dash-separated dates, or any other pattern your locale needs.

US format (MM/dd/yyyy)

Dash format (dd-MM-yyyy)

Razor

<div class="space-y-4">
    <TwDatePicker Id="us-format-datepicker" @bind-SelectedDate="SelectedDate" Format="MM/dd/yyyy" Label="US format (MM/dd/yyyy)" Class="mt-3" />
    <TwDatePicker Id="dash-format-datepicker" @bind-SelectedDate="SelectedDate" Format="dd-MM-yyyy" Label="Dash format (dd-MM-yyyy)" Class="mt-3" />
</div>

CSHARP

@code {
    public DateTime SelectedDate { get; set; } = DateTime.Now;
    public string SelectedDateTextValue { get; set; } = DateTime.Now.ToShortDateString();
}

Input Variants

The DatePicker supports different visual variants for the input field.

Default Variant

Outlined Variant

Filled Variant

Razor

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

CSHARP

@code {
    public DateTime SelectedDate { get; set; } = DateTime.Now;
    public string SelectedDateTextValue { get; set; } = DateTime.Now.ToShortDateString();
}

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

Razor

<TwDatePicker Id="dense-datepicker" @bind-SelectedDate="SelectedDate" Label="Dense Date Picker" Dense />

CSHARP

@code {
    public DateTime SelectedDate { get; set; } = DateTime.Now;
    public string SelectedDateTextValue { get; set; } = DateTime.Now.ToShortDateString();
}

Disabled and Readonly Date Picker

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

Disabled Date Picker

Readonly Date Picker

Razor

<TwDatePicker Id="disabled-datepicker" @bind-SelectedDate="SelectedDate" Label="Disabled Date Picker" Disabled Class="mt-3" />
<TwDatePicker Id="readonly-datepicker" @bind-SelectedDate="SelectedDate" Label="Readonly Date Picker" ReadOnly Class="mt-3" />

CSHARP

@code {
    public DateTime SelectedDate { get; set; } = DateTime.Now;
    public string SelectedDateTextValue { get; set; } = DateTime.Now.ToShortDateString();
}

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.