enes

Time Picker

La documentación de Time Picker llegará pronto.

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 (24) and a 12-hour clock with an AM/PM column (12).

Hiding Columns

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

Component Props

NameTypeDescription
valuebindable stringSelected time as 24h HH:mm or HH:mm:ss (matches <input type="time">).
format12 \| 24Clock format: 24 (00–23) or 12 (01–12 with an AM/PM column). Default: 24.
openbindable booleanWhether the picker flyout is open.
hideHoursbooleanHide the hours column.
hideMinutesbooleanHide the minutes column.
hideSecondsbooleanHide the seconds column.
elementbindable HTMLElementThe DOM reference of the time picker root element.
inputElementbindable HTMLInputElementThe DOM reference of the underlying input element.