Lumeo

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

  • DatePicker — Date-only selection when time is not needed
  • TimePicker — Standalone time selection without a calendar
  • Calendar — Inline calendar for date browsing and selection