VCL Controls: Time Picker

The Date and Time Picker is a control that allows the user to select either a date or a time value. This control provides two objects in one:

One of the advantages of the Date and Time Picker control is that it allows the user to select a time or a date value instead of typing it. This tremendously reduces the likelihood of mistakes.

To create a Date or Time Picker control, add a DateTimePicker control to a form or other container.

After adding a DateTimePicker control to a container, to make it a Timer Picker control, change its Kind property to a dtkTime value. This changes the control into a spin control:

The Time Picker control is a spin button made of different sections: the hours value, the minutes value, the optional seconds value, and the optional AM/PM string. To change the time, the user clicks a section and uses either the mouse or the keyboard to increase or decrease that particular value. To change another value, the user must first click it and then use the spin button.

By default, the time displays using the HH:MM:SS AM/PM format. This means that the time uses two digits for the hours from 00 to 11, two digits for the minutes from 00 to 59, two digits for the seconds from 00 to 59 and the AM or PM for morning or afternoon. To control how the time displays, set the desired value in the Format property. The possible values are:

Format	Used For	Description
h	Hour for 12-hour basis	Used to display the hour with one digit if the value is less than 10
hh	Hour for 12-hour basis	Used to display the hour with a leading 0 if the value is less than 10
H	Hour for 24-hour basis	Used to display the hour with one digit if the value is less than 10
HH	Hour for 24-hour basis	Used to display the hour with a leading 0 if the value is less than 10
m	Minute	Used to display the minute with one digit if the value is less than 10
mm	Minute	Used to display the minute with a leading 0 if the value is less than 10
t	AM/PM	Displays the letter A or P for the AM or PM section
tt	AM/PM	Displays the letters AM or PM for the last section

You can set the format at design time using the Format field on the Object Inspector. To set the format at run time, assign the desired format to the TDateTimePicker.Format property.

By default, after adding the control to the form or container, it assumes the time of the computer when the control was added. If you want to set a different time, apply a Format combination to the Time property. In the same way, at any time you can retrieve the time value on the control by accessing the Time property.

Sometimes the user may want to manually edit the time of the control such as typing the hour, the minute, the second, or AM/PM. Fortunately, the Date Picker control is equipped to natively allow or disallow some values. For example, the user cannot type anything else than a digit for the hours, minutes, or second portions and he can type only a, A, p, or P for the AM/PM section. This is the default scenario where you let this object help you control the values that the user can type. If you want to allow the user to type the value of the date or time of the control, set the ParseInput Boolean property to True.

Whenever the user changes the date or time value of the control, an OnChange event fires. You can use this event to take some action such as indicating to the user whether the new date is invalid.

If you had allowed the user to enter almost any type of value in the control by setting the ParseInput Boolean property to True, and if the user decides to edit the value of the control, while the user is doing this, the OnUserInput event fires. This can be a good place to check what the user is doing and take some action. The syntax of the OnUserInput event is:

The UserString argument is the value that the user is typing. It could be a digit or a letter. The control returns the DateAndTime as the value of the control. If, during your checking, you find out that the user typed a wrong value, you can allow or disallow it by setting the value of the AllowChange argument accordingly.