# DateTimePicker

Source: https://lumeo.nativ.sh/components/date-time-picker

# DateTimePicker

A combined date and time picker with calendar and time columns.

## 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

<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

Preview Code

Basic DateTimePicker

06/04/2026 21:37

Selected: 06/04/2026 21:37

Preview Code

Clearable

06/04/2026 10:30

Preview Code

12-Hour with Seconds

Select date and time

Preview Code

Min & Max Date

Select within range

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.

Preview Code

Time zone

Select date and time

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](/components/date-picker) — Date-only selection when time is not needed
-   [TimePicker](/components/time-picker) — Standalone time selection without a calendar
-   [Calendar](/components/calendar) — Inline calendar for date browsing and selection