TMSFNCAnalogTimeSelector / TMSFNCAnalogTimePicker

The TMSFNCAnalogTimeSelector and TMSFNCAnalogTimePicker are components that display a watch, and they can be used for time selection.

Time selection

To select the hour, click inside of the circle that is defined by the minute indication marks. To select the minute, click outside of this circle. Holding down the mouse button and dragging the mouse will cause the hour/minute hand to follow the cursor if the FollowMouse property is enabled. If the AM/PM rectangle is visible, then clicking it will switch between AM and PM. Time selection is also possible with the keyboard.

The time can be selected programmatically as well, by using the TMSFNCAnalogTimeSelector.Time or TMSFNCAnalogTimePicker.SelectedTime property.

procedure TForm1.FormCreate(Sender: TObject);
begin
 TMSFNCAnalogTimeSelector1.Appearance.ShowSecondPointer := True;
 TMSFNCAnalogTimePicker1.SelectorAppearance.ShowSecondPointer := True;
end;
procedure TForm1.Button1Click(Sender: TObject);
begin
 TMSFNCAnalogTimeSelector1.Time := StrToTime('15:49:04');
 TMSFNCAnalogTimePicker1.SelectedTime := StrToTime('03:49:04');
end;

Configuration

The TMSFNCAnalogTimeSelector has a Settings property which contains the following settings: Auto, ReadOnly and TimeOffset. With the Auto enabled, the TMSFNCAnalogTimeSelector will display the device’s current time, and no selection can be made until this setting remains enabled. If the ReadOnly is enabled, then again, no selection can be made by the user. The TimeOffset property will only have an affect if the Auto is enabled. It will set the displayed time back / forward with the given value in minutes.

procedure TForm1.FormCreate(Sender: TObject);
begin
 TMSFNCAnalogTimeSelector1.Appearance.ShowSecondPointer := True;
 TMSFNCAnalogTimeSelector2.Appearance.ShowSecondPointer := True;
 TMSFNCAnalogTimeSelector1.Settings.Auto := True;
 TMSFNCAnalogTimeSelector2.Settings.Auto := True;
 TMSFNCAnalogTimeSelector2.Settings.TimeOffset := 60;
end;

The TMSFNCAnalogTimeSelector .Styles property has some predefined appearances, but you can set your preferred appearance using the TMSFNCAnalogTimeSelector.Appearance and TMSFNCAnalogTimePicker.SelectorAppearance properties.

The TMSFNCAnalogTimePicker has an Editable property. With the Editable enabled, you can write the time you’d like to select, and clicking the dropdown will automatically set the watch to the time that’s written into the field.

In the TMSFNCAnalogTimeSelector component the OnTimeChanged event gets triggered when the time has changed. Similarly, the OnSecondChanged/OnMinuteChanged/OnHourChanged event gets triggered when the second/minute/hour has changed.

In the TMSFNCAnalogTimePicker component the OnTimeSelected event gets triggered when a time is selected.