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 />

Form Control Attributes

Attributes and events apply to the native form field; ref gives you access to it. For the container, use wrapperAttributes and wrapperRef.

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.
`ref` bindable	`HTMLInputElement` \| `null`		The DOM reference of the native time input that holds the value. The other attributes of the picker are applied to it.
`buttonRef` bindable	`HTMLButtonElement` \| `null`		The DOM reference of the button that opens the picker.
`buttonAttributes`	`HTMLButtonAttributes`		The attributes to spread on the button that opens the picker.
`wrapperRef` bindable	`HTMLDivElement` \| `null`		The DOM reference of the element wrapping the button and the native input.
`wrapperAttributes`	`HTMLAttributes`		The attributes to spread on the wrapper element.
`popupLabel`	`string`	`'Choose a time'`	The accessible name of the popup, which is announced as a dialog.
`columnLabels`	`{ hour, minute, second, … (4 keys) }`	`{ hour: 'Hour', minute: 'Minute', second: 'Second', meridiem: 'AM/PM' }`	The names of the hour, minute, second and AM/PM columns: shown on the trigger while there is no time, and given to the lists of the popup.
`NativeFieldAttributes<HTMLInputAttributes>`