TimeEdit Class

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

Assembly: DevExpress.XtraEditors.v24.1.dll

NuGet Package: DevExpress.Win.Navigation

Declaration

C#
VB.NET

public class TimeEdit :
    BaseSpinEdit

Public Class TimeEdit
    Inherits 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

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.

C#
VB.NET

// 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;

' Gets the time editor's value.
Dim time As DateTime = timeEdit1.Time
Dim editValue As DateTime = DirectCast(timeEdit1.EditValue, DateTime)
' 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:

C#
VB.NET

using DevExpress.XtraEditors;

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

Imports DevExpress.XtraEditors

Public Class Form1
Public Sub New()
    InitializeComponent()
    Dim timeEdit As New TimeEdit() With { .Name = "timeEdit", .EditValue = DateTime.Now }
    Me.Controls.Add(timeEdit)
End Sub
End Class

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:

C#
VB.NET

timeEdit1.Properties.TimeEditStyle = TimeEditStyle.TouchUI;

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

C#
VB.NET

timeEdit1.Properties.SpinStyle = SpinStyles.Horizontal;

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:

C#
VB.NET

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

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:

C#
VB.NET

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;
        }
    }
}

Imports DevExpress.XtraEditors.Repository

Public Class Form1
Inherits DevExpress.XtraEditors.XtraForm
Private repositoryItemTimeEdit1 As RepositoryItemTimeEdit

Public Sub New()
    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() With {
        .EditMask = "t",
        .UseMaskAsDisplayFormat = True
    }
    ' Assigns the time edit repository item to the Time column.
    gridView1.Columns("Time").ColumnEdit = repositoryItemTimeEdit1
End Sub
End Class

Public Class Data
    Public Shared Function GetData() As DataTable
        Dim dt As New DataTable()
        dt.Columns.Add("Time", GetType(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
    End Function
End Class