Clock Timepicker Web Component Examples

Basic Timepicker

<clock-timepicker></clock-timepicker>

12-Hour Format

<clock-timepicker format="h:mm" value="1:00pm"></clock-timepicker>

Time with Seconds

<clock-timepicker format="HH:mm:ss"></clock-timepicker>

15-Minute Steps

<clock-timepicker precision="00:15"></clock-timepicker>

Time Range (8am - 5pm)

<clock-timepicker minimum="08:00" maximum="17:00"></clock-timepicker>

Duration Picker

<clock-timepicker usePlusSign format="H:mm" minimum="-10:00" maximum="10:00"></clock-timepicker>

Custom Style

#custom-style-picker {
    --clock-timepicker-accent-color: #dc3545;
    --clock-timepicker-face-color: #f8f9fa;
    --clock-timepicker-header-background: #dc3545;
}

Hours Only

<clock-timepicker format="HH"></clock-timepicker>