Skip to main content

How to: Work with Date and Time Pickers

This guide covers DatePicker, TimePicker, CalendarDatePicker, and Calendar patterns: binding dates, formatting, validation, and date ranges.

DatePicker Basics​

The DatePicker uses spinner controls for day, month, and year selection:

<DatePicker />

Setting an initial date​

Date properties must be set in code (not XAML attributes) because there is no built-in string-to-DateTimeOffset converter:

myDatePicker.SelectedDate = new DateTimeOffset(new DateTime(2025, 6, 15));

Or bind to a view model property:

[ObservableProperty]
private DateTimeOffset? _birthDate;
<DatePicker SelectedDate="{Binding BirthDate}" />

Custom Date Formats​

Control how each part of the date displays:

<!-- Show abbreviated day name -->
<DatePicker DayFormat="ddd dd" />

<!-- Show full month name -->
<DatePicker MonthFormat="MMMM" />

<!-- Four-digit year -->
<DatePicker YearFormat="yyyy" />

Common format strings:

FormatOutput example
d5
dd05
dddMon
ddddMonday
M6
MM06
MMMJun
MMMMJune
yy25
yyyy2025

Hiding Date Parts​

Show only the fields you need:

<!-- Month and year only (no day) -->
<DatePicker DayVisible="False" />

<!-- Year only -->
<DatePicker DayVisible="False" MonthVisible="False" />

TimePicker​

The TimePicker provides hour and minute spinners:

<TimePicker />

12-hour vs 24-hour clock​

<!-- 12-hour with AM/PM -->
<TimePicker ClockIdentifier="12HourClock" />

<!-- 24-hour -->
<TimePicker ClockIdentifier="24HourClock" />

Minute increments​

<!-- 15-minute intervals -->
<TimePicker MinuteIncrement="15" />

Binding the selected time​

[ObservableProperty]
private TimeSpan? _alarmTime;
<TimePicker SelectedTime="{Binding AlarmTime}" />

CalendarDatePicker​

The CalendarDatePicker shows a text field that opens a full calendar dropdown:

<CalendarDatePicker PlaceholderText="Select a date"
                    SelectedDate="{Binding EventDate}" />

Display format​

<CalendarDatePicker DisplayFormat="yyyy-MM-dd"
                    SelectedDate="{Binding EventDate}" />

Blackout dates​

Disable specific dates from selection:

calendarDatePicker.BlackoutDates.Add(
    new CalendarDateRange(DateTime.Today, DateTime.Today.AddDays(3)));

Calendar Control​

The Calendar displays a full month view for inline date selection:

<Calendar SelectedDate="{Binding SelectedDate}"
          SelectionMode="SingleDate" />

Selection modes​

<!-- Single date -->
<Calendar SelectionMode="SingleDate" />

<!-- Range of dates -->
<Calendar SelectionMode="SingleRange" />

<!-- Multiple individual dates -->
<Calendar SelectionMode="MultipleRange" />

<!-- No selection (display only) -->
<Calendar SelectionMode="None" />

Display modes​

<!-- Show month view (default) -->
<Calendar DisplayMode="Month" />

<!-- Start from year picker -->
<Calendar DisplayMode="Year" />

<!-- Start from decade picker -->
<Calendar DisplayMode="Decade" />

Date range limits​

Restrict the navigable date range:

<Calendar DisplayDateStart="2025-01-01"
          DisplayDateEnd="2025-12-31" />

Blackout dates in code​

// Block weekends
for (var date = startDate; date <= endDate; date = date.AddDays(1))
{
    if (date.DayOfWeek is DayOfWeek.Saturday or DayOfWeek.Sunday)
        calendar.BlackoutDates.Add(new CalendarDateRange(date));
}

Date Validation​

Validate that a selected date is within an acceptable range:

public partial class BookingViewModel : ObservableValidator
{
    [ObservableProperty]
    [NotifyDataErrorInfo]
    [CustomValidation(typeof(BookingViewModel), nameof(ValidateFutureDate))]
    private DateTimeOffset? _departureDate;

    public static ValidationResult? ValidateFutureDate(DateTimeOffset? date, ValidationContext context)
    {
        if (date.HasValue && date.Value.Date <= DateTimeOffset.Now.Date)
            return new ValidationResult("Departure date must be in the future.");
        return ValidationResult.Success;
    }
}

Date Formatting in Display​

Show the selected date formatted in a TextBlock:

<StackPanel Spacing="8">
    <DatePicker SelectedDate="{Binding SelectedDate}" />
    <TextBlock Text="{Binding SelectedDate, StringFormat='Selected: {0:d}'}" />
</StackPanel>

Combining Date and Time​

Use both pickers together for a complete datetime:

<StackPanel Orientation="Horizontal" Spacing="12">
    <DatePicker SelectedDate="{Binding EventDate}" />
    <TimePicker SelectedTime="{Binding EventTime}" ClockIdentifier="24HourClock" />
</StackPanel>

Combine them in the view model:

public DateTime? CombinedDateTime
{
    get
    {
        if (EventDate is null) return null;
        var date = EventDate.Value.Date;
        return EventTime.HasValue
            ? date.Add(EventTime.Value)
            : date;
    }
}

Key Properties Reference​

DatePicker​

PropertyTypeDescription
SelectedDateDateTimeOffset?The selected date.
DayVisibleboolShow/hide the day spinner.
MonthVisibleboolShow/hide the month spinner.
YearVisibleboolShow/hide the year spinner.
DayFormatstringFormat for the day display.
MonthFormatstringFormat for the month display.
YearFormatstringFormat for the year display.

TimePicker​

PropertyTypeDescription
SelectedTimeTimeSpan?The selected time.
ClockIdentifierstring"12HourClock" or "24HourClock".
MinuteIncrementintStep size for the minute spinner.

See Also​

On this page