Getting Started with WPF DateRangePicker

This tutorial will walk you through the creation of a sample application that contains RadDateRangePicker. Before that you may want to get familiar with the Visual Structure article.

Assembly References

In order to use RadDateRangePicker control in your projects you have to add references to the following assemblies:

Telerik.Windows.Controls
Telerik.Windows.Controls.Input

Adding Telerik Assemblies Using NuGet

To use RadDateRangePicker when working with NuGet packages, install the Telerik.Windows.Controls.Input.for.Wpf.Xaml package. The package name may vary slightly based on the Telerik dlls set - Xaml or NoXaml

Read more about NuGet installation in the Installing UI for WPF from NuGet Package article.

Adding RadDateRangePicker to the Project

The following example shows how to define RadDateRangePicker in a XAML page.

Adding RadDateRangePicker in XAML

<telerik:RadDateRangePicker />

A picture showing RadDateRangePicker for WPF in Getting Started setup

To get started with the control you don't need to set any properties. In case you need to manually set the selected range, use the StartDate and EndDate of RadDateRangePicker. The properties can be set directly or via data binding.

Setting the selection

<telerik:RadDateRangePicker StartDate="2024/1/19" EndDate="2024/2/5" />

Showing the Drop Down Manually

The drop down with the calendars can be manually toggled via the IsDropDownOpen property of RadDateRangePicker.

Showing the drop down programmatically

this.dateRangePicker.IsDropDownOpen = true;

Read-Only Dates Text Input

To make the date range text input area read-only, set the IsReadOnly property of RadDateRangePicker to True.

Making the text area read-only

<telerik:RadDateRangePicker IsReadOnly="True" />

A picture showing a read-only RadDateRangePicker for WPF