TimeEdit Class
An editor that allows end users to display and edit time.
Namespace: DevExpress.XtraEditors
Assembly: DevExpress.XtraEditors.v24.2.dll
Declaration
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
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 and TimeOnly values. The TimeEdit.EditValue property specifies the editor’s edit value. You can also use the Time / TimeOnly properties. All properties are synchronized.
// 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;
// Alternatively, you can get the current time as TimeOnly type value
timeEdit1.EditValue = TimeOnly.FromDateTime(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);
}
}
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:
Orientation of Spin Buttons
Set the RepositoryItemBaseSpinEdit.SpinStyle property to Horizontal to use the horizontal spin button orientation.
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:
The following image shows the result:
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;
}
}
}