AmPmTimePicker

A lightweight, customizable web component timepicker

1. Basic Examples

Default (24h)

<time-picker></time-picker>

AM/PM Mode (12h)

<time-picker use-ampm="true" value="14:30"></time-picker>

Custom Labels & Interval (15m)

<time-picker use-ampm="true" interval="15" hour-label="HH"
                        min-label="MM" ampm-label="AM/PM"></time-picker>

Disabled State

<time-picker disabled value="10:00"></time-picker>

Read-only State

<time-picker readonly value="15:45"></time-picker>

This component supports ElementInternals, allowing it to work seamlessly with native HTML forms.

Form Data: Waiting for submission...

Customize the appearance using CSS Custom Properties.

Purple Theme with Rounded Corners

.custom-styled {
  --primary-color: #6c5ce7;
  --border-radius: 20px;
  --bg-color: #f0f0ff;
}

Custom Invalid Color (Required & Empty)

<time-picker style="--invalid-color: #ff9800;"
                        required></time-picker>

Restrict selectable time ranges using start-time and end-time attributes.

Specific Range (09:00 - 17:59)

<time-picker start-time="09:00"
                        end-time="17:59"></time-picker>

Start from 14:30

<time-picker start-time="14:30"></time-picker>

AM/PM with End Time (13:59) & 15m Interval

<time-picker use-ampm="true" end-time="13:59"
                        interval="15"></time-picker>