# C1TimeEditor Elements

## Content

**DateTimeEditors for WPF** includes the C1TimeEditor control, a simple control which provides a time picker that can show short time, long time, and time spans. When you add the C1TimeEditor control to a XAML window, it exists as a completely functional time picker. By default, the control's interface looks similar to the following image:

![](https://cdn.mescius.io/document-site-files/images/b827ed78-bea0-4378-af62-5f467cc00dcc/c1timeeditor_graphics/narrative/elements.png)

The **C1TimeEditor** control consists of the following elements:

* **Display Box**
    The display box presents the selected time. This can be set using the <span data-popup-content="This class is available in \u003ca href=\u0022/componentone/api/wpf/online-datetimeeditors/dotnet-api/C1.WPF.DateTimeEditors/C1.WPF.DateTimeEditors.C1TimeEditor.Value.html\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/api/wpf/online-datetimeeditors/dotnet-api/C1.WPF.DateTimeEditors/C1.WPF.DateTimeEditors.C1TimeEditor.Value.html\u0022\u003e.NET Framework\u003c/a\u003e." data-popup-title="C1TimeEditor.Value" data-popup-theme="ui-tooltip-green qtip-green">C1TimeEditor.Value</span> property. Users can also input numeric date into the display box. When you enter a numeric value, it will automatically be converted into time. The control can display time in three edit modes: **LongTime** (default), **ShortTime**, and **TimeSpan**.
* Increase Time Button
    The increase time button allows you to increase the time displayed in the time picker. Clicking the increase button will increase the time by one minute unless you have specified another interval.
* Decrease Time Button
    The decrease time button allows you to decrease the time displayed in the time picker. Clicking the decrease button will decrease the time by one minute unless you have specified another interval.