ASPxTimeEdit Class
An editor that displays time values.
Namespace: DevExpress.Web
Assembly: DevExpress.Web.v24.2.dll
NuGet Package: DevExpress.Web
Declaration
Remarks
The `ASPxTimeEdit`` class represents an editor consisting of an edit region and a pair of spin buttons, which can be used to adjust the date-time value. This value is specified via the DateTime property. Changing the editor’s edit value raises the DateChanged event.
Create a TimeEdit Control
Design Time
The `ASPxTimeEdit`` control is available on the DX.24.2: Common Controls toolbox tab in the Microsoft Visual Studio IDE.
Drag the control onto a form and customize the control’s settings, or paste the control’s markup in the page’s source code.
<dx:ASPxTimeEdit ID="timeEdit" runat="server" Caption="Time Editor"
DateTime="2009/11/01 15:31:34" ClientInstanceName="ClientTimeEdit">
<ClearButton DisplayMode="OnHover"></ClearButton>
</dx:ASPxTimeEdit>
Run Time
using DevExpress.Web;
...
protected void Page_Load(object sender, EventArgs e)
{
ASPxTimeEdit timeEdit = new ASPxTimeEdit();
timeEdit.ID = "timeEdit";
Page.Form.Controls.Add(timeEdit);
timeEdit.ClientInstanceName = "ClientTimeEdit";
DateTime value = new DateTime(2009, 11, 1, 15, 31, 34);
timeEdit.DateTime = value;
timeEdit.Caption = "Time Editor";
timeEdit.ClearButton.DisplayMode = ClearButtonDisplayMode.OnHover;
}
Note
DevExpress controls require that you register special modules, handlers, and options in the Web.config file. You can change this file or switch to the Design tab in the Microsoft Visual Studio IDE to automatically update the Web.config file. Note that this information is automatically registered if you use the DevExpress Template Gallery to create a project.
The appearance and position of spin buttons can be controlled using the settings available via the SpinButtons property.
The `ASPxTimeEdit`` allows editing date and time values by typing directly within it, or by clicking spin buttons to increment or decrement different portions of date and time values (months, days, hours, minutes or seconds).
The `ASPxTimeEdit`` editor’s date and time editing functionality is realized by supporting masked input, by design. The edit mask depends upon the value of the EditFormat property and can also be defined explicitly using the EditFormatString property. The DisplayFormatString property allows you to specify the pattern used to format the editor’s value for display purposes when the editor is not focused.
Note
The client-side equivalent of this editor control is represented by the ASPxClientTimeEdit object. The editor’s client-side API is enabled if the EnableClientSideAPI property is set to true, or the ClientInstanceName property is defined, or any client event is handled. Available client events can be accessed via the ClientSideEvents property.
Display a TimeSpan value in the control
To display a TimeSpan value in the ASPxTimeEdit control, perform a conversion between TimeSpan and DateTime types.
<dx:ASPxTimeEdit ID="ASPxTimeEdit1" runat="server"
DisplayFormatString="HH:mm:ss" EditFormat="Custom" EditFormatString="HH:mm:ss">
</dx:ASPxTimeEdit>
// Set value
TimeSpan time = TimeSpan.FromHours(7);
ASPxTimeEdit1.DateTime = DateTime.MinValue.Add(time);
// Get value
TimeSpan time = ASPxTimeEdit1.DateTime.TimeOfDay;