Default Time Edit

The Bootstrap Time Edit control provides the capability to display and edit date-time values. End-users can modify the editor value by clicking spin buttons to increment or decrement different date and time values (months, days, hours, minutes or seconds), or by typing directly into the edit box. You can specify the control's value using the DateTime and Value properties on the server side and the BootstrapClientTimeEdit.SetDate and BootstrapClientTimeEdit.SetValue methods on the client side.

• Client BootstrapClientTimeEdit.DateChanged and server BootstrapTimeEdit.DateChanged events - Fire when the editor's date-time value has been changed.
• SpinButtons - Controls the visibility and other settings of editor spin buttons.
• ClearButton - Controls the visibility and other settings of editor's clear button.
• Buttons - Provides access to a collection of editor custom buttons.
• CssClasses - Provides access to CSS classes applied to the Time Edit control's visual elements.

<dx:BootstrapTimeEdit runat="server" DateTime="1.1.2017 8:00">
</dx:BootstrapTimeEdit>

Edit Format

The Time edit control supports masked value editing. You can specify the predefined masks using the EditFormat property, or a custom mask by setting the EditFormat property to Custom and assigning the mask string to the EditFormatString property.

<dx:BootstrapTimeEdit runat="server" EditFormat="Custom" EditFormatString="MMMM dd, yyyy hh:mm tt" DateTime="1.1.2017 8:00">
</dx:BootstrapTimeEdit>

Display Format

The DisplayFormatString property specifies the pattern used to format the value of an editor for display purposes when the editor is not focused. Display values can be formatted using the standard formatting mechanism described in MSDN. For more information about composing format patterns, see the Date and Time Format Strings MSDN topic.

<dx:BootstrapTimeEdit runat="server" DateTime="1.1.2017 8:00" DisplayFormatString="f">
</dx:BootstrapTimeEdit>

Null Text

This example illustrates how the NullText property can be used to display the prompt text (watermark) in the editor's edit box. Specified text is displayed when the value of the editor is null, and the editor is not focused. The prompt text disappears when the editor receives focus.

<dx:BootstrapTimeEdit runat="server" NullText="Enter the taxi pick up time">
    <ClearButton DisplayMode="Always" />
</dx:BootstrapTimeEdit>

Caption and HelpText

In this example, the Time Edit control displays a caption at the top and auxiliary help text at the bottom of the editor.

• Caption - Specifies the caption text.
• HelpText - Specifies the help text.
• CaptionSettings - Provides access to settings related to the editor caption.
• HelpTextSettings - Provides access to settings related to the editor help text.

<dx:BootstrapTimeEdit runat="server" Caption="Appointment time" HelpText="Enter the appointment time" EditFormat="DateTime">
    <ClearButton DisplayMode="Always" />
    <ValidationSettings RequiredField-IsRequired="true"></ValidationSettings>
</dx:BootstrapTimeEdit>

Screen Size

Color Themes

Demo QR Code