BbTimePicker

External activator element or component ref. When provided, the activator slot is not rendered and click + ARIA are attached programmatically to the referenced element — mirroring BbDatePicker.

Which end the columns edit in range mode (v-model:active-segment). Standalone use manages this internally via the in-panel toggle; a host can drive it. Ignored outside range.

On mobile, open in a bottom off-canvas sheet instead of a floating popover. When unset, falls back to the global config.adaptive.

12-hour display with an AM/PM column; emitted values stay 24-hour.

Element or component ref the popover positions itself relative to. Defaults to the activator when omitted (anchor to a larger row while a smaller element stays the click target).

Constrains the popover within a bounding element or CSS selector.

Disables the activator and the columns.

Disable the automatic flip to the opposite side on overflow.

Render popover content before it is first shown.

Accessible label applied to the activator via aria-label.

Maximum selectable time in HH:mm format. Values outside the pattern throw during setup to surface configuration mistakes.

Minimum selectable time in HH:mm format. Values outside the pattern throw during setup to surface configuration mistakes.

v-model value: null for empty, a 24-hour HH:mm (or HH:mm:ss with seconds) string, or a two-element [start, end] array when range is true.

Props for the phone sheet. A pt inside it, object or colon keys, styles only that sheet. Extra props forwarded to the BbOffCanvas sheet when adaptive is active on mobile (e.g. title, size, persistent). Spread over the defaults: the sheet is draggable (the time wheels never drag it) and hides its ✕ (picking, backdrop, Escape and drag close it); pass { hideClose: false } to bring the ✕ back. A pt inside it styles ONLY the sheet, in BbOffCanvas's part words (root, header, title, description, content, footer, close; state open), object ({ pt: { header: '…' } }) or colon keys ({ 'pt:header': '…' }) alike. It merges after what this component forwards to its sheet, so it wins a conflict and drops nothing — see the passthrough guide § Inside the sheet. For this component it is the only way to style the sheet's header, title and ✕: none of its own parts reach inside the sheet.

Space the popover keeps from the activator.

Minimum empty space to keep from the edge of the page.

Position of the popover relative to the activator/anchor.

Passthrough, object form: the same keys as the pt:* attributes without the prefix. See the pt:<part> row.

Range selection: the value is a two-element [start, end] array.

Prevents opening while keeping the activator visible.

Adds the seconds column.

Minute-column granularity and arrow stepping.

Popover/sheet transition duration in milliseconds.

Custom activator element. Apply v-bind="props" to your trigger.