DateTimePicker
A combined date and time picker with calendar and time columns.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <DateTimePicker />
When to Use
- Scheduling events that require both a date and a specific time
- Appointment booking flows where date and time are selected together
- Event creation forms in calendaring applications
- Deadline or due date inputs that need time precision
Selected: 06/04/2026 21:37
Available: Jun 4 — Jul 4, 2026
Time zone
By default, DateTimePicker treats values as unspecified local-clock time. To pin the picker to a
specific time zone — useful when a user is in one zone but scheduling for another (e.g. booking a meeting in
Berlin from New York) — pass a TimeZoneInfo
to TimeZone. Bind
OffsetValue
(DateTimeOffset) instead
of Value to round-trip
the offset cleanly. Set ShowTimeZoneLabel="true"
to display the zone abbreviation next to the input so users see which zone they're working in.
The displayed wall-clock time is always in the picker's TimeZone,
regardless of the consumer's system zone. DST transitions are handled by
TimeZoneInfo — the
underlying DateTimeOffset
carries the correct UTC offset for any picked instant.
API Reference
DateTimePicker
| Property | Type | Default | Description |
|---|---|---|---|
| Value | DateTime? | — | The selected date and time. |
| Use24Hour | bool | true | Use 24-hour time format. |
| ShowSeconds | bool | false | Show seconds column in time picker. |
| DateFormat | string? | "yyyy-MM-dd" | Date format string for display. |
| Clearable | bool | false | Show a clear button when value is set. |
| Placeholder | string? | "Select date and time" | Placeholder text when no value. |
| Disabled | bool | false | Disable the picker. |
| ValueChanged | EventCallback<DateTime?> | — | Two-way binding callback; fires when the value changes. |
| Culture | CultureInfo? | null | Culture used for formatting and parsing. Defaults to the current culture. |
| MinDate | DateTime? | null | Earliest selectable date. Dates before this are disabled in the calendar. |
| MaxDate | DateTime? | null | Latest selectable date. Dates after this are disabled in the calendar. |
| IsDateDisabled | Func<DateTime, bool>? | null | Custom function that returns true for dates that should be disabled in the calendar. |
| Required | bool | false | Marks the field as required. Syncs with a parent FormField. |
| Invalid | bool | false | Applies error styling. Syncs with a parent FormField. |
| ErrorText | string? | null | Error message displayed below the field when Invalid is true. |
| HelperText | string? | null | Helper text shown below the field when not invalid. |
| Label | string? | null | Label rendered above the field (standalone, without FormField). |
| Name | string? | null | HTML name attribute for form submission. |
| FormField | FormField.FormFieldContext? | null | Cascaded context from a parent FormField; wires label, validation, and required state automatically. |
| FirstDayOfWeek | DayOfWeek? | null | Overrides the locale-derived first day of week shown by the embedded calendar. |
Related Components
- DatePicker — Date-only selection when time is not needed
- TimePicker — Standalone time selection without a calendar
- Calendar — Inline calendar for date browsing and selection