Time Picker
A time input that shows formatted selected time via a trigger and opens a popover with a scrollable list of selectable times stepped by minutes.
Preview
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value | string | — | Selected time as HH:MM or HH:MM:SS |
step | string | 30 | Step between time options in minutes |
use24 | boolean | — | Use 24-hour time format |
seconds | boolean | — | Include seconds in value and display |
min | string | — | Minimum selectable time as HH:MM |
max | string | — | Maximum selectable time as HH:MM |
placeholder | string | Pick a time | Placeholder text when no time is selected |
disabled | boolean | — | Disables the picker |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/time-picker.js"></script>import "./pura/lib/time-picker.js";