Using the Time Picker Control

From RAD Studio
Jump to: navigation, search

Go Up to VCL


TTimePicker allows the user to select a time value from a dropdown; changing the hours, minutes, and even seconds and AM/PM values separately. The user can change the selection with the keyboard arrow keys, clicking with the mouse on the upper or lower elements of a list or on the top and bottom arrows, or using the mouse wheel. You can customize the control by changing the time format, the time selection dropdown count, the minutes increment value, and the display of ok and cancel buttons.

TTimePicker fully supports VCL styling for Windows 10 and previous versions of Windows.

TTimePicker.png

Configure Properties

TTimePicker allows you to configure the following main properties:

  • The Color, HighlightColor, PopupColor, SelectionColor, and SelectionFontColor properties allow you to set a custom color scheme.
  • The Font property allows you to customize font settings.
  • The DropDownCount property allows you to set a number of options to display in the dropdown.
  • The MinuteIncrement property allows you to configure custom minutes increments for the options displayed in the dropdown.
  • The Time property allows you to set the initial time you want to display in the control.
  • The TimeFormat property allows you to establish the format in which you want to display the time. You can include seconds hh:mm:ss or exclude hours if required mm:ss. You can use single letters for hours and minutes if you do not want to show an initial 0 for single digit elements. Add AMPM to the time format to use a 12 hours format and to include an AM / PM selector to the dropdown.

TTimePicker properties.png

Changing Styles

TDatePicker allows you to set custom styles. You can choose from a variety of VCL Styles and apply a selected style in a few steps:

  1. Click Options in the Project menu to open the Project Options dialog box.
  2. Click Application in the left-hand panel and select Appeareance.
  3. Select a style from the list of Custom Styles and click OK.

TTimePicker styles.png

See Also