Lumeo

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.

Available: Jun 4 — Jul 4, 2026

Su
Mo
Tu
We
Th
Fr
Sa

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

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).

Opt out for calendar-only flows:

Keyboard Interactions

Key Action
EnterOpens the calendar popover or selects the focused date.
ArrowUpMoves focus to the same day in the previous week.
ArrowDownMoves focus to the same day in the next week.
ArrowLeftMoves focus to the previous day.
ArrowRightMoves focus to the next day.
EscapeCloses the calendar popover without selecting a date.

API Reference

DatePicker

Prop Type Default Description
ValueDateOnly?nullThe currently selected date. Use with @bind-Value.
ValueChangedEventCallback<DateOnly?>—Callback invoked when the selected date changes.
Placeholderstring"Pick a date"Text shown when no date is selected.
Formatstring"dd.MM.yyyy"Date format string for displaying the selected date.
MinDateDateOnly?nullEarliest selectable date.
MaxDateDateOnly?nullLatest selectable date.
PresetsList<DatePickerPreset>?nullQuick-select preset dates shown beside the calendar.
ModeDatePicker.DatePickerModeSinglePicker mode. Values: DatePicker.DatePickerMode.Single, Range, Month, Year.
RangeStartDateOnly?nullStart date for range mode. Use with @bind-RangeStart.
RangeStartChangedEventCallback<DateOnly?>—Callback invoked when range start changes.
RangeEndDateOnly?nullEnd date for range mode. Use with @bind-RangeEnd.
RangeEndChangedEventCallback<DateOnly?>—Callback invoked when range end changes.
ShowTimePickerboolfalseShows a time picker below the calendar.
TimeTimeSpan?nullSelected time value. Use with @bind-Time.
TimeChangedEventCallback<TimeSpan?>—Callback invoked when the time changes.
DateTimeValueDateTime?nullCombined date+time value when ShowTimePicker is true. Use with @bind-DateTimeValue.
DateTimeValueChangedEventCallback<DateTime?>—Callback invoked when the combined date+time value changes.
CultureCultureInfo?nullCulture used for labels and parsing. Defaults to the current culture.
DisabledboolfalseDisables the date picker trigger button.
ClearableboolfalseShows a clear button to reset the selected date.
TriggerContentRenderFragment?nullCustom content for the trigger button.
NumberOfMonthsint1Number of months to display. Defaults to 2 in Range mode.
InlineboolfalseRenders the calendar directly in the page without a popover trigger button.
ShowWeekNumbersboolfalseShows ISO week numbers alongside the calendar rows.
FirstDayOfWeekDayOfWeek?nullOverride the first day of the week. When null, falls back to the current culture's setting.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.
IsDateDisabledFunc<DateOnly, bool>?nullPredicate called for each calendar day; return true to disable that date.
DateClassFunc<DateOnly, string?>?nullFunction that returns extra CSS classes for a given day cell.
DateTooltipFunc<DateOnly, string?>?nullFunction that returns a tooltip string for a given day cell.
DateBadgeFunc<DateOnly, string?>?nullFunction that returns a badge label (1–2 chars) to overlay on a given day cell.
OpenboolfalseProgrammatically controls whether the calendar popover is open. Use with @bind-Open.
OpenChangedEventCallback<bool>—Fires when the popover open state changes.
RequiredboolfalseMarks the field as required for form validation.
InvalidboolfalseApplies a destructive ring to indicate a validation error.
ErrorTextstring?nullError message shown below the field when Invalid is true (standalone).
HelperTextstring?nullHelp text shown below the field when there is no error (standalone).
Labelstring?nullInline label rendered above the picker (standalone).
Namestring?nullHTML name attribute for form identification.
VariantDatePickerVariantCalendarCalendar (default) or Wheel for iOS-style drum scrolling.

DateRangePicker

Prop Type Default Description
StartDateDateOnly?nullStart date of the range. Use with @bind-StartDate.
StartDateChangedEventCallback<DateOnly?>—Callback invoked when the start date changes.
EndDateDateOnly?nullEnd date of the range. Use with @bind-EndDate.
EndDateChangedEventCallback<DateOnly?>—Callback invoked when the end date changes.
MinDateDateOnly?nullEarliest selectable date.
MaxDateDateOnly?nullLatest selectable date.
Placeholderstring"Select date range"Text shown when no range is selected.
Formatstring"MMM dd, yyyy"Date format string for displaying selected dates.
PresetsList<DateRangePreset>?nullQuick-select preset date ranges.
DisabledboolfalseDisables the date range picker.
ClearablebooltrueShows a clear button to reset the date range.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

Related Components

  • 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.