Siticone Time Picker

The SiticoneTimePicker is a modern, fully customizable time selection control. It replaces the standard numeric up-down inputs with a touch-friendly interface featuring individual component selection (Hour/Minute/Second), dropdown lists for value picking, keyboard navigation, and support for both 12-hour and 24-hour formats.

Time Configuration

Control how time is displayed and edited.

Property	Type	Description
`Hour`	int	The hour component. Range 0-23 for 24-hour format, 1-12 for 12-hour format.
`Minute`	int	The minute component (0-59).
`Second`	int	The second component (0-59).
`IsAM`	bool	True if the time is AM, False if PM. Only applicable in 12-hour mode.
`Use24HourFormat`	bool	Switches between 12-hour (AM/PM) and 24-hour (Military) time formats.
`ShowSeconds`	bool	Toggles the visibility of the seconds component.

Visual Style

Customize colors, borders, and fonts to match your application theme.

Property	Type	Description
`TimePickerBackColor`	Color	Background color of the main control area.
`TextColor`	Color	Color of unselected time components.
`ActiveComponentColor`	Color	Highlight color for the currently selected time component (e.g., Hour).
`BorderColor`	Color	Color of the control's border.
`SeparatorColor`	Color	Color of the colon (:) separators between time parts.
`CornerRadius...`	int	Individual radius settings for each corner of the control.

Configure the popup list that appears when clicking a time component.

Property	Type	Description
`DropdownBackColor`	Color	Background color of the dropdown list.
`ItemHeight`	int	Height of each selectable item in the dropdown list.
`SelectedItemBackColor`	Color	Background color of the currently selected item in the dropdown.
`SelectedTextColor`	Color	Text color of the currently selected item in the dropdown.
`ShowItemDividers`	bool	Shows horizontal lines between dropdown items.
`AutoCloseOnSelection`	bool	If true, the dropdown closes immediately after clicking an item.
`DropdownMaxHeight`	int	Maximum height of the dropdown before scrolling is enabled.

Interaction & Animation

Property	Type	Description
`KeyboardNavigationEnabled`	bool	Enables Left/Right arrows to switch components and Up/Down to change values.
`RippleEnabled`	bool	Enables ripple animation on click.
`RippleColor`	Color	Color of the ripple effect.
`ToggleDropdownKey`	Keys	Keyboard key that opens/closes the dropdown (Default: Space).

Events

Events to handle time changes and dropdown interactions.

TimeChanged Event

// Fired whenever any time component (Hour, Minute, Second, AM/PM) changes.
timePicker.TimeChanged += (s, e) => 
{
                Console.WriteLine($"Time Changed: {e.NewHour}:{e.NewMinute} { (e.NewIsAM ? "AM" : "PM") }");
    
                // Example: Validate business hours
                if (e.NewHour < 9 || e.NewHour > 17)
    {
        lblStatus.Text = "Outside business hours";
        lblStatus.ForeColor = Color.Red;
    }
};

ActiveComponentChanged Event

// Fired when the user clicks or navigates to a different time part (e.g., from Hour to Minute).
timePicker.ActiveComponentChanged += (s, e) => 
{
                Console.WriteLine($"Now editing: {e.NewComponent}");
};

Designer Support

The control includes a comprehensive Smart Tag menu in Visual Studio for rapid configuration.

Category	Features
`Theme Presets`	Apply one-click themes: Light, Dark, Blue, Green, Purple.
`Time Format`	Quick toggles for 12h/24h format and Show Seconds.
`Time Values`	Set Current Time helper method.
`Corner Radius`	Presets for Square (0px) and Rounded (8px) corners.

Usage Examples

Example 1: Standard 12-Hour Picker

A typical time picker for scheduling appointments.

C# - Basic Setup

private void SetupAppointmentPicker()
{
    timeStart.Use24HourFormat = false;
    timeStart.ShowSeconds = false;
    timeStart.BorderColor = Color.LightGray;
    timeStart.ActiveComponentColor = Color.DodgerBlue;
    
                // Set default to 9:00 AM
    timeStart.SetTime(9, 0, 0, true);
}

Example 2: 24-Hour Military Time

Configuring for 24-hour format with seconds enabled.

C# - 24H Format

private void SetupLogTimePicker()
{
    timeLog.Use24HourFormat = true;
    timeLog.ShowSeconds = true;
    
                // Modern styling
    timeLog.CornerRadiusTopLeft = 4;
    timeLog.CornerRadiusTopRight = 4;
    timeLog.CornerRadiusBottomLeft = 4;
    timeLog.CornerRadiusBottomRight = 4;
    
                // Update label on change
    timeLog.TimeChanged += (s, e) => 
    {
                string timeString = timeLog.GetFormattedTime();
        lblLog.Text = $"Log entry time: {timeString}";
    };
}

Example 3: Custom Theming

Applying a custom color scheme programmatically.

C# - Custom Theme

private void ApplyDarkTheme()
{
    timePicker1.TimePickerBackColor = Color.FromArgb(45, 45, 48);
    timePicker1.TextColor = Color.WhiteSmoke;
    timePicker1.SeparatorColor = Color.Gray;
    timePicker1.ActiveComponentColor = Color.Cyan;
    timePicker1.BorderColor = Color.FromArgb(100, 100, 100);
    
                // Dropdown styling
    timePicker1.DropdownBackColor = Color.FromArgb(60, 60, 60);
    timePicker1.SelectedItemBackColor = Color.FromArgb(80, 80, 80);
    timePicker1.SelectedTextColor = Color.Cyan;
}