DateTimePicker is a text field with a drop-down that holds a calendar, an analogue clock and three lists for hour, minute and AM/PM. TimePicker is the same control without the calendar; both derive from TimePickerBase, so everything below applies to either unless it mentions a date.

<mah:DateTimePicker Width="190" SelectedDateTime="{Binding Appointment}" />

The value

SelectedDateTime is the one to bind. There is no separate date and time property — a DateTimePicker is one value, which is the point of it.

DateTimePicker also takes over the DatePicker properties for the calendar half: DisplayDate, DisplayDateStart, DisplayDateEnd, FirstDayOfWeek, IsTodayHighlighted and SelectedDateFormat.

What the drop-down shows

TimePartVisibility is a flags enum — Hour, Minute, Second, plus HourMinute and All. Seconds are off by default in both places:

<mah:DateTimePicker PickerVisibility="All" HandVisibility="All" />

SourceHours, SourceMinutes and SourceSeconds replace what the lists offer, which is how you get a picker that only offers quarter hours:

<mah:TimePicker SourceMinutes="{Binding QuarterHours}" />

Each has a matching HoursItemStringFormat, MinutesItemStringFormat and SecondsItemStringFormat for how the entries are written.

Two nicer alternatives

The built-in drop-down puts the accent-banded Calendar next to the clock. This site ships two drop-in dictionaries that give the picker the same treatment as the calendar variants: a rounded Fluent look and a square Windows 10 one.

Each also brings the modern time selection described below.

Each needs the matching calendar dictionary merged first:

<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="Styles/Controls.Calendar.WinUI.xaml" />
<ResourceDictionary Source="Styles/Controls.DateTimePicker.WinUI.xaml" />

<Style BasedOn="{StaticResource MahApps.Styles.DateTimePicker.WinUI}" TargetType="{x:Type mah:DateTimePicker}" />
<Style BasedOn="{StaticResource MahApps.Styles.TimePicker.WinUI}" TargetType="{x:Type mah:TimePicker}" />

The drop-down then carries the whole calendar variant with it:

Both are styles, not replacement templates. Everything they change is something the built-in template already exposes — ControlsHelper.CornerRadius for the field, CalendarStyle for the drop-down, MinHeight and Padding — so they keep working when the library's template changes underneath them. That is also their limit.

<Border x:Name="PART_PopupBorder"
        Background="{DynamicResource MahApps.Brushes.Control.Background}"
        BorderBrush="{DynamicResource MahApps.Brushes.Control.Border}"
        BorderThickness="1">

A modern time selection

The analogue clock is the oldest-looking part of the drop-down, and Fluent has no clock face at all — in WinUI the time is three plain columns. IsClockVisible is a normal property, so a style can simply switch the clock off:

Both figures are a TimePicker drop-down, which is the time selection with no calendar above it. The second is what MahApps.Styles.TimePicker.WinUI gives you: no clock, no field chrome, no chevrons, just centred numbers. Open a column and the selected value is an accent-filled pill:

The Win10 variant is the same row — the two only part company inside the open list, where one pill is rounded and the other square.

Reaching the lists without styling every ComboBox

The hour, minute, second and AM/PM lists are ordinary ComboBoxes with no Style of their own, so the only way to reach them is an implicit ComboBox style. Putting one in the application's resources would restyle every other ComboBox in the application, which is far too blunt.

The way out is Style.Resources. Resource lookup from inside a template walks up to the templated parent's style, so an implicit style declared there is found by the drop-down and by nothing else:

<Style x:Key="MahApps.Styles.DateTimePicker.WinUI"
       BasedOn="{StaticResource {x:Type mah:DateTimePicker}}"
       TargetType="{x:Type mah:DateTimePicker}">
    <Style.Resources>
        <!--  Reaches PART_HourPicker and friends, and no other ComboBox.  -->
        <Style BasedOn="{StaticResource MahApps.Styles.ComboBox.DateTimePicker.WinUI}" TargetType="{x:Type ComboBox}" />
        <Style BasedOn="{StaticResource MahApps.Styles.Label.DateTimePicker.WinUI}" TargetType="{x:Type Label}" />
    </Style.Resources>
    <Setter Property="IsClockVisible" Value="False" />
    <!--  ...  -->
</Style>

The Label entry is the : between the columns, which has no style of its own either.

That is the whole mechanism, and it is worth knowing for any control whose template contains unstyled children.

Prefer to keep the clock? It is one setter:

<Style BasedOn="{StaticResource MahApps.Styles.DateTimePicker.WinUI}" TargetType="{x:Type mah:DateTimePicker}">
    <Setter Property="IsClockVisible" Value="True" />
</Style>

Watermarks and the clear button

Both pickers set a watermark: Select a date and Select a time. They are ordinary TextBoxHelper values, so they are replaced the usual way, and the clear button and floating watermark work as on any text box:

<mah:DateTimePicker mah:TextBoxHelper.Watermark="When?"
                    mah:TextBoxHelper.UseFloatingWatermark="True"
                    mah:TextBoxHelper.ClearTextButton="True" />

DatePickerHelper.DropDownButtonContent is the glyph on the button — the TimePicker style points it at a clock path, the DateTimePicker keeps the calendar one.

Validation

Both carry MahApps.Templates.ValidationError, so a failed binding gets the red border and the popup described on the Validation page.

Related

TimePicker for the time alone, DatePicker for the date alone, and Calendar for the calendar the drop-down shows — including the two variants these styles reuse.