Date Picker

A popover-based date picker built on top of Calendar.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<DatePicker />

When to Use

Select a single date, such as a birthday or appointment date.
Pick a date range for filtering reports, booking periods, or scheduling.
Provide month or year pickers for credit card expiry, fiscal year, or archive navigation.

Default

With Label

Date of birth

Custom Format

Event date

Min & Max Date

Appointment date

Available: Jul 23 — Aug 22, 2026

With Presets

Date Range Picker

Month Picker

Year Picker

Date Time Picker

Clearable

Disabled

Inline Calendar

Week Numbers

Mode — interactive preview

Switch Mode to see how the picker surface changes between Single, Range, Month, and Year.

Multiple Dates

Two Months (NumberOfMonths)

Wheel Variant (Mobile)

Keyboard input

The DatePicker accepts free-form typed dates by default — users can type 2026-05-21 or 21/05/2026 and the picker will parse it against the current culture. Set AllowKeyboardInput="false" to make the trigger readonly (calendar-only selection — useful for kiosks, presentation views, or any case where typed input would defeat the constraints you've set on the calendar).

Keyboard input

Opt out for calendar-only flows:

Calendar-only (no keyboard input)

Keyboard Interactions

Key	Action
`Enter`	Opens the calendar popover or selects the focused date.
`ArrowUp`	Moves focus to the same day in the previous week.
`ArrowDown`	Moves focus to the same day in the next week.
`ArrowLeft`	Moves focus to the previous day.
`ArrowRight`	Moves focus to the next day.
`Escape`	Closes the calendar popover without selecting a date.

API Reference

DatePicker

Prop	Type	Default	Description
Value	DateOnly?	null	The currently selected date. Use with @bind-Value.
ValueChanged	EventCallback<DateOnly?>	—	Callback invoked when the selected date changes.
Placeholder	string	"Pick a date"	Text shown when no date is selected.
Format	string	"dd.MM.yyyy"	Date format string for displaying the selected date.
MinDate	DateOnly?	null	Earliest selectable date.
MaxDate	DateOnly?	null	Latest selectable date.
Presets	List<DatePickerPreset>?	null	Quick-select preset dates shown beside the calendar.
Mode	DatePicker.DatePickerMode	Single	Picker mode. Values: `DatePicker.DatePickerMode.Single`, `Range`, `Month`, `Year`, `Multiple`.
RangeStart	DateOnly?	null	Start date for range mode. Use with @bind-RangeStart.
RangeStartChanged	EventCallback<DateOnly?>	—	Callback invoked when range start changes.
RangeEnd	DateOnly?	null	End date for range mode. Use with @bind-RangeEnd.
RangeEndChanged	EventCallback<DateOnly?>	—	Callback invoked when range end changes.
Values	List<DateOnly>?	null	The selected days for `DatePickerMode.Multiple`. Use with @bind-Values.
ValuesChanged	EventCallback<List<DateOnly>?>	—	Callback invoked when the multiple-selection set changes.
ShowTimePicker	bool	false	Shows a time picker below the calendar.
Time	TimeSpan?	null	Selected time value. Use with @bind-Time.
TimeChanged	EventCallback<TimeSpan?>	—	Callback invoked when the time changes.
DateTimeValue	DateTime?	null	Combined date+time value when ShowTimePicker is true. Use with @bind-DateTimeValue.
DateTimeValueChanged	EventCallback<DateTime?>	—	Callback invoked when the combined date+time value changes.
Culture	CultureInfo?	null	Culture used for labels and parsing. Defaults to the current culture.
Disabled	bool	false	Disables the date picker trigger button.
Clearable	bool	false	Shows a clear button to reset the selected date.
TriggerContent	RenderFragment?	null	Custom content for the trigger button.
NumberOfMonths	int	1	Number of months to display. Defaults to 2 in Range mode.
Inline	bool	false	Renders the calendar directly in the page without a popover trigger button.
ShowWeekNumbers	bool	false	Shows ISO week numbers alongside the calendar rows.
FirstDayOfWeek	DayOfWeek?	null	Override the first day of the week. When null, falls back to the current culture's setting.
Class	string?	null	Additional CSS classes.
FullWidth	bool	false	Expands the date picker to fill its container width (equivalent to `FullWidth` on Button).
AutoFocus	bool	false	Focuses the date-picker trigger on first render.
AllowKeyboardInput	bool	true	Lets the trigger's text be typed directly instead of only picked from the calendar. No effect for Range/Multiple mode, the Wheel variant, Inline, or a custom TriggerContent.
OnParseError	EventCallback<string>	—	Fires when typed keyboard input fails to parse to a valid, in-range date; the buffer reverts to the last valid value. The argument is the offending raw text.
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes.
IsDateDisabled	Func<DateOnly, bool>?	null	Predicate called for each calendar day; return true to disable that date.
DateClass	Func<DateOnly, string?>?	null	Function that returns extra CSS classes for a given day cell.
DateTooltip	Func<DateOnly, string?>?	null	Function that returns a tooltip string for a given day cell.
DateBadge	Func<DateOnly, string?>?	null	Function that returns a badge label (1–2 chars) to overlay on a given day cell.
Open	bool	false	Programmatically controls whether the calendar popover is open. Use with @bind-Open.
OpenChanged	EventCallback<bool>	—	Fires when the popover open state changes.
Required	bool	false	Marks the field as required for form validation.
Invalid	bool	false	Applies a destructive ring to indicate a validation error.
ErrorText	string?	null	Error message shown below the field when Invalid is true (standalone).
HelperText	string?	null	Help text shown below the field when there is no error (standalone).
Label	string?	null	Inline label rendered above the picker (standalone).
Name	string?	null	HTML name attribute for form identification.
Variant	DatePickerVariant	Calendar	Calendar (default) or Wheel for iOS-style drum scrolling.

DateRangePicker

Prop	Type	Default	Description
StartDate	DateOnly?	null	Start date of the range. Use with @bind-StartDate.
StartDateChanged	EventCallback<DateOnly?>	—	Callback invoked when the start date changes.
EndDate	DateOnly?	null	End date of the range. Use with @bind-EndDate.
EndDateChanged	EventCallback<DateOnly?>	—	Callback invoked when the end date changes.
MinDate	DateOnly?	null	Earliest selectable date.
MaxDate	DateOnly?	null	Latest selectable date.
Placeholder	string	"Select date range"	Text shown when no range is selected.
Format	string	"MMM dd, yyyy"	Date format string for displaying selected dates.
Presets	List<DateRangePreset>?	null	Quick-select preset date ranges.
Disabled	bool	false	Disables the date range picker.
Clearable	bool	true	Shows a clear button to reset the date range.
FullWidth	bool	false	Expands the date range picker to fill its container width. Forwarded to the inner DatePicker.
FirstDayOfWeek	DayOfWeek?	null	Override the first day of the week. When null, falls back to the current culture's setting.
ShowWeekNumbers	bool	false	Shows ISO week numbers alongside the calendar rows.
IsDateDisabled	Func<DateTime, bool>?	null	Predicate called for each calendar day; return true to disable that date (e.g. booked rooms).
DateClass	Func<DateTime, string>?	null	Function that returns extra CSS classes for a given day cell.
DateTooltip	Func<DateTime, string?>?	null	Function that returns a tooltip string (rendered as the day cell's title) for a given day.
DateBadge	Func<DateTime, RenderFragment?>?	null	Per-date indicator slot rendered absolutely positioned in the bottom-right of the day cell.
Class	string?	null	Additional CSS classes.
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes.

DateWheelPicker

The iOS-style drum-scroll picker rendered by DatePicker when Variant="DatePickerVariant.Wheel". Can also be used standalone.

Prop	Type	Default	Description
Value	DateOnly?	null	The currently selected date. Use with @bind-Value.
ValueChanged	EventCallback<DateOnly?>	—	Callback invoked when the selected date changes.
Min	DateOnly?	null	Earliest selectable date.
Max	DateOnly?	null	Latest selectable date.
Culture	CultureInfo?	null	Culture used for month labels. Defaults to the current culture.
Class	string?	null	Additional CSS classes.
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes.

Calendar — The inline calendar used by DatePicker, available as a standalone component.
Input — Use a plain text input when users need to type dates in a known format.
Popover — The underlying overlay mechanism used by DatePicker.

Date Picker

Installation

Usage

When to Use

Keyboard input

Keyboard Interactions

API Reference

DatePicker

DateRangePicker

DateWheelPicker

Related Components

Cookies & consent