DatePicker

Date input with field-by-field editing and calendar icon.

Overview

DatePicker extends Control and provides a structured date input with separate editable fields for year, month, and day. A calendar icon () is displayed alongside the fields to visually identify the control. When no date is selected, customizable placeholder text is shown. Users navigate between fields with Left/Right arrows or Tab, adjust values with Up/Down arrows, or type digits directly — the cursor auto-advances to the next field once enough digits are entered. The control validates dates automatically, clamping day values to the correct range for the selected month and year.

Basic Example

<StackPanel Orientation="Vertical">
  <TextBlock Text="Select a date:" />
  <DatePicker PlaceholderText="Pick a date..." />
</StackPanel>

Properties

Property	Type	Default	Description
SelectedDate	DateTime?	null	The currently selected date, or null if no date is chosen.
DateFormat	string	"yyyy-MM-dd"	Display format string controlling field order and separators.
Icon	string	"\uF073"	Nerd Font glyph displayed as the calendar icon.
PlaceholderText	string	"Select date..."	Text shown when `SelectedDate` 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

Empty with Placeholder

<DatePicker PlaceholderText="No date selected" />

Pre-Set Date

<StackPanel Orientation="Vertical">
  <TextBlock Text="Start date:" />
  <DatePicker SelectedDate="2026-01-15"
              DateFormat="yyyy-MM-dd" />
</StackPanel>

Custom Icon

<StackPanel Orientation="Vertical">
  <TextBlock Text="Event date:" />
  <DatePicker SelectedDate="2026-12-25"
              Icon=""
              FocusColor="Magenta"
              DateFormat="yyyy-MM-dd" />
</StackPanel>

Keyboard Shortcuts

Key	Action
Left Arrow	Move focus to the previous field (day → month → year).
Right Arrow	Move focus to the next field (year → month → day).
Tab	Advance to the next field, same as Right Arrow.
Up Arrow	Increment the focused field by one (year, month, or day).
Down Arrow	Decrement the focused field by one (year, month, or day).
0–9	Direct digit entry — auto-advances to the next field when the current field is full.

Key Concepts

DatePicker extends Control and is focusable by default, with keyboard-driven field editing.
The control splits the date into three editable fields (year, month, day) based on the DateFormat pattern.
Day values are automatically clamped to the valid range for the selected month and year — for example, selecting February limits the day to 28 or 29 depending on leap year status.
When SelectedDate is null the control renders PlaceholderText in a dimmed style; pressing any navigation or digit key initialises the date to today.
The Icon property accepts any Nerd Font glyph, allowing you to swap the default calendar icon for a project-specific symbol.
Use SelectedDate="{Binding ...}" with Mode=TwoWay for two-way data binding of the date value.