4. Date Controls

Many desktop applications need users to select dates. Whether you’re building an employee management system, appointment scheduler, hotel booking application, or inventory system, WPF provides built-in controls that make working with dates simple and user-friendly.

The two primary date controls in WPF are:

• DatePicker – Allows users to select a single date from a drop-down calendar.
• Calendar – Displays a full calendar that supports selecting one or multiple dates.

In this article, you’ll learn:

• What each control is used for
• Key properties
• Common events
• XAML examples
• Best practices
• Real-world usage

---

1. DatePicker #

A DatePicker combines a text box with a drop-down calendar, allowing users to either type a date or select one from the calendar.

It is commonly used for:

• Date of Birth
• Order Date
• Invoice Date
• Joining Date
• Delivery Date
• Appointment Date

---

Basic Syntax #

<DatePicker Width="180"/>

---

Setting a Default Date #

<DatePicker Width="180"
            SelectedDate="2026-07-28"/>

---

Displaying a Watermark #

<DatePicker Width="200"
            SelectedDateFormat="Short"/>

---

Disable the Control #

<DatePicker Width="180"
            IsEnabled="False"/>

---

Restrict Date Range #

Only allow users to select dates within a specific range.

<DatePicker Width="200"
            DisplayDateStart="2026-01-01"
            DisplayDateEnd="2026-12-31"/>

---

Display Today’s Date #

<DatePicker SelectedDate="{x:Static sys:DateTime.Today}"/>

Add the following namespace:

xmlns:sys="clr-namespace:System;assembly=mscorlib"

---

Data Binding Example #

<DatePicker SelectedDate="{Binding BirthDate}"/>

---

Important Properties #

Property	Description
SelectedDate	Selected date
DisplayDate	Month currently displayed
DisplayDateStart	Minimum allowed date
DisplayDateEnd	Maximum allowed date
SelectedDateFormat	Short or Long date
IsEnabled	Enable or disable control

---

Common Events #

<DatePicker SelectedDateChanged="DatePicker_SelectedDateChanged"/>

---

Example Code Behind #

private void DatePicker_SelectedDateChanged(
    object sender,
    SelectionChangedEventArgs e)
{
    DateTime? selected = datePicker.SelectedDate;

    if (selected != null)
    {
        MessageBox.Show(selected.Value.ToShortDateString());
    }
}

---

Best Practice #

Whenever possible, use a DatePicker instead of asking users to manually type dates. This reduces validation errors and improves the overall user experience.

---

2. Calendar #

A Calendar displays an entire monthly calendar directly on the screen.

Unlike the DatePicker, the Calendar is always visible and supports selecting multiple dates depending on its configuration.

Common uses include:

• Scheduling
• Leave Management
• Booking Systems
• Event Planning
• Attendance Systems
• Holiday Calendars

---

Basic Syntax #

<Calendar/>

---

Selecting Today’s Date #

<Calendar SelectedDate="2026-07-28"/>

---

Restrict Date Range #

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

---

Multiple Date Selection #

<Calendar SelectionMode="MultipleRange"/>

Selection modes include:

• SingleDate
• SingleRange
• MultipleRange
• None

---

Display Different Months #

<Calendar DisplayDate="2026-12-01"/>

---

Disable Week Numbers #

<Calendar IsTodayHighlighted="True"/>

---

Data Binding #

<Calendar SelectedDate="{Binding MeetingDate}"/>

---

Important Properties #

Property	Description
SelectedDate	Currently selected date
SelectedDates	Collection of selected dates
DisplayDate	Current month
DisplayDateStart	Minimum selectable date
DisplayDateEnd	Maximum selectable date
SelectionMode	Date selection behavior
IsTodayHighlighted	Highlights today’s date

---

Common Events #

<Calendar SelectedDatesChanged="Calendar_SelectedDatesChanged"/>

---

Example Code Behind #

private void Calendar_SelectedDatesChanged(
    object sender,
    SelectionChangedEventArgs e)
{
    if (calendar.SelectedDate != null)
    {
        MessageBox.Show(calendar.SelectedDate.Value.ToLongDateString());
    }
}

---

Best Practice #

Use the Calendar control when users need to frequently view or interact with dates. For simple date entry in forms, the DatePicker is usually a better choice because it uses less screen space.

---

DatePicker vs Calendar #

Feature	DatePicker	Calendar
Screen Space	Small	Large
Calendar Always Visible	No	Yes
Single Date Selection	Yes	Yes
Multiple Date Selection	No	Yes
Ideal for Forms	✔	✘
Ideal for Scheduling	✘	✔

---

Complete Example #

<StackPanel Margin="20">

    <TextBlock Text="Employee Joining Date"
               FontWeight="Bold"
               Margin="0,0,0,5"/>

    <DatePicker Name="joiningDatePicker"
                Width="200"
                Margin="0,0,0,20"/>

    <TextBlock Text="Company Holiday Calendar"
               FontWeight="Bold"
               Margin="0,0,0,5"/>

    <Calendar Name="holidayCalendar"
              Height="250"/>

</StackPanel>

---

Summary #

WPF provides two powerful controls for working with dates:

• DatePicker is compact, easy to use, and perfect for forms where users need to select a single date.
• Calendar provides a full monthly view, making it ideal for scheduling, planning, and applications that require multiple date selections.

Choosing the right control depends on your application’s requirements. For most data-entry forms, DatePicker is the preferred option, while Calendar is better suited for dashboards, planners, and booking systems where users need a broader view of dates.

In the next tutorial, you’ll learn about Slider, ProgressBar, ScrollBar, ScrollViewer, Image, MediaElement, and RichTextBox, expanding your knowledge of WPF controls for building modern desktop applications.