# Date Picker Source: https://lumeo.nativ.sh/components/date-picker # Date Picker A popover-based date picker built on top of Calendar. ## Installation .NET CLI PackageReference Lumeo CLI dotnet add package Lumeo One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction). ## Usage @using Lumeo ## 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. Preview Code Default Preview Code With Label Date of birth Preview Code Custom Format Event date Preview Code Min & Max Date Appointment date Available: Jun 4 — Jul 4, 2026 Preview Code With Presets Preview Code Date Range Picker Pick a date range Preview Code Month Picker Preview Code Year Picker Preview Code Date Time Picker Preview Code Clearable Preview Code Disabled Preview Code Inline Calendar June 2026 Su Mo Tu We Th Fr Sa 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 2 3 4 5 6 7 8 9 10 11 Preview Code Week Numbers Preview Code Mode — interactive preview Switch Mode to see how the picker surface changes between Single, Range, Month, and Year. Single Range Month Year Preview Code Wheel Variant (Mobile) Pick a date ## 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). Preview Code Keyboard input Opt out for calendar-only flows: Preview Code Calendar-only (no keyboard input) Pick a date ## 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 — 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? null Quick-select preset dates shown beside the calendar. Mode DatePicker.DatePickerMode Single Picker mode. Values: `DatePicker.DatePickerMode.Single`, `Range`, `Month`, `Year`. RangeStart DateOnly? null Start date for range mode. Use with @bind-RangeStart. RangeStartChanged EventCallback — Callback invoked when range start changes. RangeEnd DateOnly? null End date for range mode. Use with @bind-RangeEnd. RangeEndChanged EventCallback — Callback invoked when range end changes. ShowTimePicker bool false Shows a time picker below the calendar. Time TimeSpan? null Selected time value. Use with @bind-Time. TimeChanged EventCallback — Callback invoked when the time changes. DateTimeValue DateTime? null Combined date+time value when ShowTimePicker is true. Use with @bind-DateTimeValue. DateTimeValueChanged EventCallback — 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. AdditionalAttributes Dictionary? null Additional HTML attributes. IsDateDisabled Func? null Predicate called for each calendar day; return true to disable that date. DateClass Func? null Function that returns extra CSS classes for a given day cell. DateTooltip Func? null Function that returns a tooltip string for a given day cell. DateBadge Func? 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 — 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 — Callback invoked when the start date changes. EndDate DateOnly? null End date of the range. Use with @bind-EndDate. EndDateChanged EventCallback — 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? 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. Class string? null Additional CSS classes. AdditionalAttributes Dictionary? null Additional HTML attributes. ## Related Components - [Calendar](/components/calendar) — The inline calendar used by DatePicker, available as a standalone component. - [Input](/components/input) — Use a plain text input when users need to type dates in a known format. - [Popover](/components/popover) — The underlying overlay mechanism used by DatePicker.