C# WPF Tutorial – DatePicker

WPF DatePicker is used to get input from users for Date Selection, but in Combobox via WPF Calendar. The question raises here is why we need DatePicker if we already have the Calendendar, both are technically the same but only differentiate in visuals.

So we need DatePicker because it’s not always you want to show the calendar in the square on your WPF application, sometimes due to space availability or UI requirements need something modern and less space-consuming components. Such as Datepicker which is the modern form of Calendar.

You can declare DatePicker in XAML and also in C#, we are using xaml way in the following snippet.

<Window x:Class="JWPF.MainWindow"
        xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:local="clr-namespace:JWPF"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="C# WPF Tutorial - By Junaid Shahid" Height="150" Width="240">

    <StackPanel>
        <DatePicker/>
    </StackPanel>
</Window>

Output:

Now when the user clicks on “Select a date”, the user can write the date manually. If the user clicks on the “15” icon which represents the calendar only then the calendar will prompt for date selection.

Output:

Other than this, there is no difference between a date picker and a normal calendar. You can apply the same events and properties which are applicable to the calendar, such as pre-selected dates, blackout dates etc.

If you don’t want to show some of the dates to be selectable you can use BlackoutDates property.

<Window x:Class="JWPF.MainWindow"
        xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:local="clr-namespace:JWPF"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="C# WPF Tutorial - By Junaid Shahid" Height="150" Width="240">

    <StackPanel>
        <DatePicker>
            <DatePicker.BlackoutDates>
                <CalendarDateRange Start="10/1/2022" End = "10/10/2022"/>
                <CalendarDateRange Start="10/21/2022" End = "10/25/2022"/>
            </DatePicker.BlackoutDates>
        </DatePicker>
    </StackPanel>
</Window>

Output: The above code will make those dates disabled so the user can’t select those, which you can observe in the following image.

Note: Formate for BlackoutDates is Month/Day/Year

If you want to preselect a single date or multiple dates you can use SelectedDate property. For single-date preselection, you can use the following code.

<Window x:Class="JWPF.MainWindow"
        xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:local="clr-namespace:JWPF"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="C# WPF Tutorial - By Junaid Shahid" Height="150" Width="240">

    <StackPanel>
        <DatePicker>
            <DatePicker.SelectedDate>
                <sys:DateTime>10/5/2022</sys:DateTime>
            </DatePicker.SelectedDate>
        </DatePicker>
    </StackPanel>
</Window>

If you want to preselect multiple dates you can’t do that in DatePicker, because it is designed to get only one date from the user.