Time Picker

Import the component and bind a string. Click a part and type, or use the up and down arrows.

<script>
  import { TimePicker } from "theui-svelte";
  let start = $state("09:30")
</script>

<TimePicker bind:value={start}>Start</TimePicker>

Add hour12 for a third part with AM and PM. Press A or P to set it, or Space to flip it. The value stays in twenty four hour form, so 2:30 PM is still "14:30".

<TimePicker bind:value={end} hour12>End</TimePicker>

<!-- Rename AM and PM for another language -->
<TimePicker hour12 amLabel="প্রা" pmLabel="অপ" />

Use min and max, both "HH:mm", to keep the time inside office hours or any other window; a time outside them is pulled back. The step prop is how many minutes the minute part moves at a time.

<TimePicker value="09:00" min="09:00" max="17:00">Office hours</TimePicker>
<TimePicker value="10:15" step={15}>Quarter hours</TimePicker>

Small up and down buttons sit at the end of the field and act on whichever part has focus, or on the minutes when none does. Pass stepper=false to replace them with a clock icon.

<TimePicker value="08:00">With buttons</TimePicker>
<TimePicker value="08:00" stepper={false}>With a clock icon</TimePicker>

The size and variant props work as on every other field, and are inherited from a Form or a Fieldset.

<TimePicker value="07:05" size="sm" />
<TimePicker value="07:05" size="lg" />
<TimePicker value="07:05" variant="flat" />
<TimePicker value="07:05" rounded="full" />
<TimePicker value="07:05" disabled>Disabled</TimePicker>

Give the component a name and the "HH:mm" value is submitted, the same form a native time input sends. The onchange callback runs with every change.

<form method="POST">
  <TimePicker name="startTime" value="09:30" hour12 onchange={(v) => console.log(v)}>
    Start time
  </TimePicker>
  <button>Save</button>
</form>

The animationSpeed prop sets how quickly the field reacts to focus and hover. It takes "none", "slower", "slow", "normal", "fast" and "faster", and the default is "normal". Inside a Form or a Fieldset the value is inherited, so one setting covers every field at once.

<TimePicker animationSpeed="slower">Slower</TimePicker>
<TimePicker animationSpeed="normal">Normal</TimePicker>
<TimePicker animationSpeed="faster">Faster</TimePicker>
<TimePicker animationSpeed="none">No animation</TimePicker>

Set reset to true to drop the border, background and focus ring and keep only the classes you pass. The hour, minute and meridiem parts keep their layout, so typing and the arrow keys are unaffected. The default is false, and a Form or a Fieldset can set it for every field it holds.

<TimePicker reset class="w-full border-b-2 border-gray-400 px-1 py-2">
  Underline only
</TimePicker>

Use segmentClasses for the hour, minute and AM/PM parts, class for the field itself and wrapperClasses for the whole thing.

<TimePicker value="09:30" segmentClasses="text-lg font-semibold" />
<TimePicker value="09:30" hour12 segmentClasses="focus:bg-info-500" class="w-48" />

Typing digits fills the part you are in and moves on as soon as nothing more can fit, so 9 in the hour jumps straight to the minutes while 1 waits in case you mean 12. The up and down arrows step the value and wrap around, and stepping the hour past eleven flips AM to PM. The left and right arrows move between parts, and so does the colon key. Home and End go to the lowest and highest value, and Backspace or Delete empties the part. The wheel steps the part that has focus, so the page still scrolls everywhere else. Pasting 14:30 or 2:30 pm anywhere in the field fills it.

Each part is a spin button with its own name, its value and its lowest and highest value, which is what a native time field does, so a screen reader says "Hour, 9" and reads the new number as it changes. The parts sit in a group named by the label, and an empty part is read as "Empty" rather than as the two dashes on screen. The stepper buttons are named Increase and Decrease and are left out of the tab order, since the arrow keys already do the same thing from the keyboard. The value is always kept in twenty four hour form, so what is sent does not depend on what is shown.