Less common, but still high up on the usefulness scale, are controls that allow the user to enter a time of day or a period of time. The TimeOfDayTextBox and DurationTextBox fill these roles.

TimeOfDayTextBox

As with the DateTextBox, this control is heavily optimized for data entry personnel. The input is filtered and can be formatted automatically to whatever standard is desired. There are no pop-up commands with this control, but it does support arrows to increment and decrement the hours and minutes. These arrows are optional and are controlled by the xShowCommandButtons property. Figure 5 shows an example of a TimeOfDayTextBox control in action.

Figure 5: TimeOfDayTextBox with CommandButtons shown. (Firefox)

DurationTextBox

If it’s a TimeSpan data type you’re after, rather than a DateTime, the DurationTextBox is for you. It allows hours, minutes, and seconds to be specified in a standardized manner. It’s optimized for data entry, and allows keyboard shortcuts, but doesn’t include pop-ups or extra user interface elements. Figure 6 shows an example, including its tooltip (all of these controls provide such tooltips).

Figure 6: DurationTextBox with ToolTip (IE6)

Integration

One other cool feature of the TimeOfDayTextBox is that it can be integrated with the DateTextBox, allowing them to act as one element for getting and setting full DateTime values. This is done via the TimeOfDayTextBox's xDateTime property.  To make this connection, you simply need to assign the controlID of the DateTextBox to the TimeOfDayTextBox's xDateTextBoxControlID property.