Date Time Picker

The default DateTimePicker displays a trigger button with a calendar-clock icon and the selected value in the culture-aware general format. Bind to a DateTime? with @bind-Value. The popover stays open after a date is picked so the time can be adjusted in the same interaction — click outside or press Escape to close. The Now button jumps to the current date and time, and Clear resets the value.

Set TimeFormat to TimeFormat.Hour24 to hide the AM/PM toggle and cycle hours from 00 to 23, and enable ShowSeconds to add a seconds selector. With seconds enabled, the trigger switches to the culture-aware G format automatically. The AM/PM toggle labels are fixed literals, so prefer Hour24 for locales that do not use AM/PM notation.

Use MinuteStep to increment minutes in fixed intervals — ideal for appointment slots. This example uses 15-minute steps, so the minute stepper cycles through 00, 15, 30, and 45. The Now button also snaps the current time down to the nearest step.

Combine MinDate and MaxDate to restrict selection to a booking window, and use DisabledDates to programmatically exclude specific dates. This example accepts bookings within the next 30 days, excluding weekends — dates outside the window and weekend days appear disabled in the calendar.

Use DateTimeFormat to control how the selected value appears on the trigger button — any valid .NET date and time format string is supported. Set Placeholder to customize the empty-state text shown before a value is selected.

Set Disabled to true to prevent user interaction. The trigger displays with reduced opacity and the popover does not open, making it suitable for read-only displays or locked form fields.

A real-world composition showing the DateTimePicker within a form layout. The picker is wrapped in a Field with a label and description, restricted to future dates, and stepped in 15-minute increments — a typical setup for scheduling meetings or appointments.