Time Selection

TTMSFNCAnalogTimePicker and TTMSFNCAnalogTimeSelector display an analog clock face for time input. The picker wraps the selector in a popup drop-down with an editable time field. The selector is a standalone clock face that can display the current device time or a fixed time.

Analog Time Picker

The picker shows a text field with a drop-down that opens an analog clock face.

Set the Initial Time

Set SelectedTime during form setup. Control the displayed text with TimeFormat and the drop-down size with DropDownWidth and DropDownHeight.

procedure TForm1.ConfigureAnalogTimePicker;
begin
  TMSFNCAnalogTimePicker1.SelectedTime := EncodeTime(9, 30, 0, 0);
  TMSFNCAnalogTimePicker1.TimeFormat := 'hh:nn';
  TMSFNCAnalogTimePicker1.DropDownWidth := 260;
  TMSFNCAnalogTimePicker1.DropDownHeight := 260;
end;

Handle User Selection

OnTimeSelected fires with the selected TTime once the user confirms a time in the drop-down.

procedure TForm1.FormCreate(Sender: TObject);
begin
  TMSFNCAnalogTimePicker1.OnTimeSelected := TMSFNCAnalogTimePicker1TimeSelected;
end;

procedure TForm1.TMSFNCAnalogTimePicker1TimeSelected(Sender: TObject;
  ATime: TTime);
begin
  Caption := FormatDateTime('hh:nn', ATime);
end;

Interaction

Click inside the circle (within the minute marks) to set the hour; click outside to set the minute.
Drag with the left button held to follow the cursor when FollowMouse is enabled.
Click the AM/PM rectangle to toggle between AM and PM when it is visible.
Set Editable := True to allow typing the time directly. Clicking the drop-down then sets the selector to the typed time.

Analog Time Selector

TTMSFNCAnalogTimeSelector is a standalone clock face that can be used independently or together with the picker.

Live Clock and Time Zones

Use Settings.Auto to display the device's current time continuously. Combine it with Settings.TimeOffset (in minutes) to show a second clock in a different time zone.

procedure TForm1.ConfigureAnalogTimeSelector;
begin
  { Show a live clock }
  TMSFNCAnalogTimeSelector1.Settings.Auto := True;
  TMSFNCAnalogTimeSelector1.Appearance.ShowSecondPointer := True;

  { Show a second clock offset by 2 hours (UTC+2 vs UTC) }
  TMSFNCAnalogTimeSelector2.Settings.Auto := True;
  TMSFNCAnalogTimeSelector2.Settings.TimeOffset := 120;  { minutes }

  { Set a fixed time on a selector that is not in auto mode }
  TMSFNCAnalogTimeSelector3.Settings.Auto := False;
  TMSFNCAnalogTimeSelector3.Time := StrToTime('15:30:00');
end;

Set Settings.ReadOnly := True to allow display without user interaction.

Respond to Time Changes

The selector fires OnTimeChanged whenever the selected time changes, plus fine-grained events OnHourChanged, OnMinuteChanged, and OnSecondChanged when each unit changes independently.

Appearance

Both controls share Appearance (selector) and SelectorAppearance (picker) to control clock face colours, hands, and tick styling. Styles provides predefined themes.

Use Appearance.ShowSecondPointer := True to display the second hand on either component.

Combining the Picker and Selector

A common layout pairs the picker with a read-only selector that shows the selected time on a large clock face.

procedure TForm1.FormCreate(Sender: TObject);
begin
  { Selector shows the currently picked time as a large clock face }
  TMSFNCAnalogTimeSelector1.Settings.ReadOnly := True;
  TMSFNCAnalogTimeSelector1.Appearance.ShowSecondPointer := False;
  TMSFNCAnalogTimeSelector1.Time := TMSFNCAnalogTimePicker1.SelectedTime;
end;

procedure TForm1.TMSFNCAnalogTimePicker1TimeSelected(Sender: TObject;
  ATime: TTime);
begin
  { Update the display selector and a label simultaneously }
  TMSFNCAnalogTimeSelector1.Time := ATime;
  lblTime.Caption := FormatDateTime('hh:nn', ATime);
end;

Table of Contents