WPF DateTimeUpDown Control

WPF DateTimeUpDown Control

I am sure you have used a NumericUpDown control in your application in which the current value of the control increases or decreases by using an up and down keys. WPF team has done a great job by extending this feature in WPF Toolkit and now up and down keys can be used on DateTime, decimal, double, and integer data types.

A DateTimeUpDown control allows us to increment or decrement the value of a DateTime using up/down keys, button spinner or the mouse wheel. The increment or decrement value depends on the current value and format of the control.

This article demonstrates how to use the DateTimeUpDown control in a WPF application using C# and XAML.  

Adding Reference to WPF Toolkit Extended Assembly

The DateTimeUpDown control is a part of the WPF Toolkit Extended and does not come with Visual Studio 2010. To use the Calculator control in your application, you must add reference to the WPFToolkit.Extended.dll assembly. You can download Extended WPF Tookit from the CodePlex or you can use the WPFToolkit.Extended.dll available with this download. All you need is the DLL. See Downloads section of this article. You can find more details in my blog Adding Reference to WPF Toolkit Extended.

 

Creating a DateTimeUpDown

The DateTimeUpDown element represents a WPF DateTimeUpDown control in XAML. The DateTimeUpDown control is defined in the System.Windows.Controls namespace. Listing 1 creates a simple DateTimeUpDown control. The Value property is a DateTime property and represents the date in the control. The Format property defines the format of the date.   

<wpfx:DateTimeUpDown Width="300" Height="30" Value="{Binding LastUpdated}" Format="FullDateTime" />

Listing 1

The default output of Listing 1 generates Figure 1.

Figure 1

Value and Format

The Value property represents the current DateTime value associated with the control. The Format property represents the format of the date and time that is a type of Microsoft.Windows.Controls.DateTimeFormat enumeration. Figure 2 lists various formats available for the control. 

Figure 2

Real World Example

Figure 3 is a real world example where we can select a date time format and based on the selection in the DropDown, the format of the DateTime changes. The Format dropdown lists all the formats available for the DateTime object.

Figure 3

 

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    DtUpDown.Value = DateTime.Now;
    DtUpDown.Format = Microsoft.Windows.Controls.DateTimeFormat.FullDateTime;
    FormatDropDown.ItemsSource = System.Enum.GetValues(typeof(Microsoft.Windows.Controls.DateTimeFormat));
} 

private void FormatDropDown_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    string str = FormatDropDown.Items[FormatDropDown.SelectedIndex].ToString();
    DtUpDown.Format = (Microsoft.Windows.Controls.DateTimeFormat)Enum.Parse(typeof(Microsoft.Windows.Controls.DateTimeFormat),        FormatDropDown.Items[FormatDropDown.SelectedIndex].ToString());

}

Listing 3

Summary

In this article, we discussed how to use the DateTimeUpDown control in a WPF application using C# and XAML.