Phoundry UI

TimePicker

A 12-hour format time picker with an AM/PM select.

import { TimePicker } from 'phoundry-ui';

Basic usage

:

Selected: 2:30 PM (14:30 24h)

Show code 
let hour = $state(14);
let minute = $state(30);

<TimePicker bind:hour bind:minute />

onchange callback

:

Last callback: move a field

Show code 
<TimePicker
  bind:hour
  bind:minute
  onchange={(h, m) => console.log(h, m)}
/>

Disabled

:
Show code 
<TimePicker bind:hour bind:minute disabled />

TimePicker props

PropTypeDefaultDescription
hour number0Hour value (0-23).
minute number0Minute value (0-59).
onchange (hour: number, minute: number) => void—Called when the time changes.
disabled booleanfalseDisable the inputs and select.
class string—Additional CSS classes on the wrapper.

Usage tips

  • Use bind:hour and bind:minute to keep your state in sync with the picker.
  • The component automatically handles 12-hour to 24-hour conversion internally.
  • The hour prop is always a 24-hour value (0-23).