Skip to main content

TimeEdit Class

An editor that allows end users to display and edit time.

Namespace: DevExpress.XtraEditors

Assembly: DevExpress.XtraEditors.v24.1.dll

NuGet Package: DevExpress.Win.Navigation

Declaration

public class TimeEdit :
    BaseSpinEdit

Remarks

The TimeEdit control includes all features of a standard TextEdit and ships with the following time-specific UI options:

  • 12/24 hour format
  • Configurable display and edit format (Time Masks)
  • Increment and decrement time units by Spin Buttons or Touch UI

TimeEdit Control

Read the following topic for information on DevExpress calendar and Date-Time editors: How to: Enter date-time values.

Edit Value (Time)

The TimeEdit control operates with DateTime values. The timeEdit.EditValue property specifies the editor’s edit value. You can also use the Time property. Both properties are in sync with each other.

// Gets the time editor's value.
DateTime time = timeEdit1.Time;
DateTime editValue = (DateTime)timeEdit1.EditValue;
// Uses the Time property to set the time editor's value.
timeEdit1.Time = DateTime.Now;
// Uses the EditValue property to set the time editor's value.
timeEdit1.EditValue = DateTime.Now;

Note

Use the TimeSpanEdit control to edit time intervals.

Create a TimeEdit Control

Drag the TimeEdit component from the Toolbox and drop it onto a form to create a standalone time editor.

The following code sample creates a TimeEdit control and adds it to a form:

using DevExpress.XtraEditors;

namespace DXApplication {
    public Form1() {
        InitializeComponent();
        TimeEdit timeEdit = new TimeEdit() { Name = "timeEdit", EditValue = DateTime.Now };
        this.Controls.Add(timeEdit);
    }
}

Run Demo: TimeEdit Control

Enable Touch UI

The TimeEdit control supports the Touch-aware time-editing UI. Users can use scrollable tiles to edit the time. Set the RepositoryItemTimeEdit.TimeEditStyle property to TimeEditStyle.TouchUI to enable Touch UI.

The following code sample demonstrates how to enable Touch UI:

timeEdit1.Properties.TimeEditStyle = TimeEditStyle.TouchUI;

Orientation of Spin Buttons

Set the RepositoryItemBaseSpinEdit.SpinStyle property to Horizontal to use the horizontal spin button orientation.

TimeEdit Control

timeEdit1.Properties.SpinStyle = SpinStyles.Horizontal;

Customize the Time Format

Use the following properties to specify the time format and input mask:

The following code sample demonstrates how to specify the input mask:

timeEdit1.Properties.EditMask = "t";
timeEdit1.Properties.UseMaskAsDisplayFormat = true;

The following image shows the result:

TimeEdit Control

Refer to the following topic for information on time masks: Standard Format Strings for Date/Time Values.

Use TimeEdit in Container Controls

Use the RepositoryItemTimeEdit class to create a time edit repository item and use it to display and edit time in a container control (for example, Data Grid, TreeList, Vertical Grid).

The following example demonstrates how to create a time edit repository item, customize its settings, and use it in the Data Grid control to display and edit cell values in the Time column:

using DevExpress.XtraEditors.Repository;

namespace DXApplication {
    public partial class Form1 : DevExpress.XtraEditors.XtraForm {
        RepositoryItemTimeEdit repositoryItemTimeEdit1;
        public Form1() {
            InitializeComponent();
            // Binds the Data Grid to a data source.
            gridControl1.DataSource = Data.GetData();
            // Forces the Data Grid to initialize its settings.
            gridControl1.ForceInitialize();
            // Creates and initializes a time edit repository item.
            repositoryItemTimeEdit1 = new RepositoryItemTimeEdit() {
                EditMask = "t",
                UseMaskAsDisplayFormat= true
            };
            // Assigns the time edit repository item to the Time column.
            gridView1.Columns["Time"].ColumnEdit = repositoryItemTimeEdit1;
        }
    }
    public class Data {
        public static DataTable GetData() {
            DataTable dt = new DataTable();
            dt.Columns.Add("Time", typeof(DateTime));
            dt.Rows.Add(DateTime.Now);
            dt.Rows.Add(DateTime.Now.AddHours(1));
            dt.Rows.Add(DateTime.Now.AddHours(2));
            dt.Rows.Add(DateTime.Now.AddDays(1));
            dt.Rows.Add(DateTime.Now.AddDays(3));
            return dt;
        }
    }
}
See Also