DatePicker: Blazor date picker component

Examples

Binding

@bind-Date (or @bind-Value) is a nullable DateTime; Clearable lets an emptied field bind to null.

Sprint start

Release date

Start 2 Mar 2026, release 20 Apr 2026: 49 days in between.

website/Examples/DataInput/DatePickerBasicExample.razor Source

Limits and format

MinDate and MaxDate bound the calendar; DateFormat sets how the text reads.

Trial ends (next 30 days)

Contract start (ISO format)

trial=2026-11-04 · contract=2026-01-01

website/Examples/DataInput/DatePickerLimitsExample.razor Source

States

Disabled, ReadOnly, and Editable="false" for picking from the calendar only.

Disabled

Read-only

Picker only

website/Examples/DataInput/DatePickerStatesExample.razor Source

Playground

Release date

Label

Placeholder

DateFormat

Dense

Disabled

ReadOnly

Editable

Clearable

<DatePicker Label="Release date" />

API

<DatePicker>

DaisyBlazor

Parameters

AdornmentIcon string
= null
Icon ligature shown over the calendar picker; defaults to the calendar icon.
Clearable bool
= false
When true, emptying the text clears the date; otherwise an empty entry snaps back.
Color Color
= Color.Default
Accepted for MudBlazor compatibility; currently has no effect.
Date DateTime?
= null
The selected date; two-way bindable with @bind-Date.
DateFormat string
= null
.NET format of the visible text (e.g. "dd/MM/yyyy"); defaults to the current culture's short date pattern. Typed entries are parsed with it first, then leniently in the current culture.
Dense bool
= false
Renders the compact input-sm field.
Disabled bool
= false
Disables the text field and hides the calendar picker.
Editable bool
= true
When false, the date can only be chosen from the picker, not typed.
For object
= null
Accepted for MudBlazor compatibility; currently has no effect.
FullWidth bool
= true
Stretches the field to its container width (w-full); true by default.
Label string
= null
Label text rendered above the field.
Margin Margin
= Margin.Normal
Margin.Dense renders the compact input-sm field, same as Dense.
MaxDate DateTime?
= null
Latest selectable date; later typed entries are rejected and the picker is limited.
MinDate DateTime?
= null
Earliest selectable date; earlier typed entries are rejected and the picker is limited.
Placeholder string
= null
Placeholder text for the empty field; defaults to the active date format.
ReadOnly bool
= false
Makes the text field read-only and hides the calendar picker.
Value DateTime?
= null
Alias of Date for @bind-Value; used when Date is null.
Variant Variant
= Variant.Outlined
Outlined (default) adds input-bordered; Filled adds input-bordered bg-base-200; Text renders a borderless ghost input (input-ghost).
Class string
= null
Extra CSS classes added to the outer fieldset.
Style string
= null
Inline CSS style applied to the outer fieldset.

Name	Type	Default	Description
AdornmentIcon	string	null	Icon ligature shown over the calendar picker; defaults to the calendar icon.
Clearable	bool	false	When true, emptying the text clears the date; otherwise an empty entry snaps back.
Color	Color	Color.Default	Accepted for MudBlazor compatibility; currently has no effect.
Date	DateTime?	null	The selected date; two-way bindable with @bind-Date.
DateFormat	string	null	.NET format of the visible text (e.g. "dd/MM/yyyy"); defaults to the current culture's short date pattern. Typed entries are parsed with it first, then leniently in the current culture.
Dense	bool	false	Renders the compact input-sm field.
Disabled	bool	false	Disables the text field and hides the calendar picker.
Editable	bool	true	When false, the date can only be chosen from the picker, not typed.
For	object	null	Accepted for MudBlazor compatibility; currently has no effect.
FullWidth	bool	true	Stretches the field to its container width (w-full); true by default.
Label	string	null	Label text rendered above the field.
Margin	Margin	Margin.Normal	Margin.Dense renders the compact input-sm field, same as Dense.
MaxDate	DateTime?	null	Latest selectable date; later typed entries are rejected and the picker is limited.
MinDate	DateTime?	null	Earliest selectable date; earlier typed entries are rejected and the picker is limited.
Placeholder	string	null	Placeholder text for the empty field; defaults to the active date format.
ReadOnly	bool	false	Makes the text field read-only and hides the calendar picker.
Value	DateTime?	null	Alias of Date for @bind-Value; used when Date is null.
Variant	Variant	Variant.Outlined	Outlined (default) adds input-bordered; Filled adds input-bordered bg-base-200; Text renders a borderless ghost input (input-ghost).
Class	string	null	Extra CSS classes added to the outer fieldset.
Style	string	null	Inline CSS style applied to the outer fieldset.

Events

DateChanged EventCallback<DateTime?>
Raised with the new date when the user picks or types a valid date.
ValueChanged EventCallback<DateTime?>
Raised with the new date alongside DateChanged.

Name	Type	Description
DateChanged	EventCallback<DateTime?>	Raised with the new date when the user picks or types a valid date.
ValueChanged	EventCallback<DateTime?>	Raised with the new date alongside DateChanged.

From MudDatePicker

DatePicker keeps MudDatePicker's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.