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: 07/23/2026 08:25
Available: Jul 23 — Aug 22, 2026
Pick a date and time for the kickoff.
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
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