DateTimePicker

Combined date and time input with 5-6 editable fields and calendar icon.

Overview

DateTimePicker extends Control and combines date and time editing into a single control with five or six editable fields: year, month, day, hours, minutes, and optionally seconds. A calendar icon () is displayed alongside the fields. When no value is selected, customizable placeholder text is shown. Users navigate across all fields with Left/Right arrows, adjust values with Up/Down arrows, or type digits directly with auto-advance between fields. The control validates dates automatically — day values are clamped for the selected month and year, and time fields use wrapping arithmetic (e.g. hours wrap from 23 to 0).

Basic Example

<StackPanel Orientation="Vertical">
  <TextBlock Text="Select date and time:" />
  <DateTimePicker PlaceholderText="Pick date/time..." />
</StackPanel>

Properties

Property	Type	Default	Description
SelectedDateTime	DateTime?	null	The currently selected date and time, or null if nothing is chosen.
ShowSeconds	bool	false	When true, displays an additional seconds field (6 fields total).
Icon	string	"\uF073"	Nerd Font glyph displayed as the calendar icon.
PlaceholderText	string	"Select date/time..."	Text shown when `SelectedDateTime` is null.
Width	Size	Auto	Explicit width of the control.
Height	Size	Auto	Explicit height of the control.
FocusColor	Color	Cyan	Border color when the control has keyboard focus.
HoverColor	Color	Yellow	Border color when the mouse hovers over the control.

Examples

Date and Time

<StackPanel Orientation="Vertical">
  <TextBlock Text="Meeting start:" />
  <DateTimePicker SelectedDateTime="2026-04-15T09:30" />
</StackPanel>

With Seconds

<StackPanel Orientation="Vertical">
  <TextBlock Text="Log timestamp:" />
  <DateTimePicker SelectedDateTime="2026-04-15T14:30:45"
                  ShowSeconds="True"
                  FocusColor="Green" />
</StackPanel>

Placeholder

<StackPanel Orientation="Vertical">
  <TextBlock Text="Event schedule:" />
  <DateTimePicker PlaceholderText="Choose event date and time..."
                  FocusColor="Magenta" />
</StackPanel>

Keyboard Shortcuts

Key	Action
Left Arrow	Move focus to the previous field (seconds → minutes → hours → day → month → year).
Right Arrow	Move focus to the next field (year → month → day → hours → minutes → seconds).
Up Arrow	Increment the focused field by one. Date fields are clamped; time fields wrap (23 → 0, 59 → 0).
Down Arrow	Decrement the focused field by one. Date fields are clamped; time fields wrap (0 → 23, 0 → 59).
0–9	Direct digit entry — auto-advances to the next field when the current field is full.

Key Concepts

DateTimePicker extends Control and is focusable by default, combining date and time editing into a single navigable control.
The control presents 5 fields by default (year, month, day, hours, minutes). Setting ShowSeconds="True" adds a sixth seconds field.
Left/Right arrows navigate seamlessly across all fields — moving right from the day field advances into hours, providing a fluid editing experience.
Date fields (year, month, day) use clamped arithmetic with automatic day-of-month validation, while time fields (hours, minutes, seconds) use wrapping arithmetic.
When SelectedDateTime is null the control renders PlaceholderText in a dimmed style; pressing any navigation or digit key initialises the value to the current date and time.
Use SelectedDateTime="{Binding ...}" with Mode=TwoWay for two-way data binding of the combined date/time value.