Time Picker AI

The Time Picker lets users select a time from carousel-style hour, minute and second columns. It supports a 24-hour clock or a 12-hour clock with an AM/PM column, and any column can be hidden individually.

Usage

<script>
	import { TimePicker } from 'fluentui-svelte';

	let value = $state('');
</script>

<TimePicker bind:value format={12} />

Clock Format

Use the format prop to choose between a 24-hour clock and a 12-hour clock with an AM/PM column.

View Code

<TimePicker format={24} />
<TimePicker format={12} />

Hiding Columns

Use hideHours, hideMinutes or hideSeconds to hide individual columns. By default the seconds column is shown.

View Code

<TimePicker format={24} hideSeconds />

Component Props

Name	Type	Default	Description
`value` bindable	`string`	`''`	Selected time as 24h `HH:mm` or `HH:mm:ss` (matches `<input type="time">`).
`format`	`12` \| `24`	`24`	Clock format: `24` (00-23) or `12` (01-12 with an AM/PM column).
`open` bindable	`boolean`	`false`	Controls the open state of the picker.
`hideHours`	`boolean`	`false`	Removes the hour column.
`hideMinutes`	`boolean`	`false`	Removes the minute column.
`hideSeconds`	`boolean`	`false`	Removes the second column.
`element` bindable	`HTMLButtonElement`		The DOM reference of the trigger button.
`wrapperRef` bindable	`HTMLDivElement`		The DOM reference of the element wrapping the trigger and its input.
`wrapperAttributes`	`HTMLAttributes`		The attributes to spread on the wrapper element.
`inputElement` bindable	`HTMLInputElement`		The DOM reference of the underlying input element.
`inputProps`	`HTMLInputAttributes`		HTML attributes for the underlying input element. Give it a `name` to submit the value with a form.
`popupLabel`	`string`	`'Choose a time'`	The accessible name of the popup, which is announced as a dialog.
Element Attributes (`button`)