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.

For a trigger that already exists elsewhere in your markup. A bare schedule cell with no slot state is shorter still with the v-bb-time directive.

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.

Set it per instance only to disagree with the app-wide config.adaptive, or to false for viewport-independent tests. Desktop placement props do not apply to the sheet.

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

Display only: the model still holds 24-hour text, so nothing downstream changes when you switch it on.

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: sideways only, alongside the trigger; it flips at the viewport.

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. The activator is named by it followed by the activator's own text ("Due date 12 Sep"), through aria-labelledby.

Your trigger usually shows the time, not what it is for. Name the value here, such as "Monday opening time", so each picker in a schedule reads differently to a screen reader.

Maximum selectable time, HH:mm (other shapes throw at setup). The columns disable the entries no in-range time can use; a typed value (or an hour beside an out-of-range minute) is clamped with a disabled_time error.

Later entries stay visible in the columns, disabled, the way the calendar shows days out of range.

Minimum selectable time, HH:mm (other shapes throw at setup). The columns disable the entries no in-range time can use; a typed value (or an hour beside an out-of-range minute) is clamped with a disabled_time error.

Earlier entries stay visible in the columns, disabled, the way the calendar shows days out of range.

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 (the BbOffCanvas that adaptive renders on mobile), spread over its defaults. A pt inside it styles only the sheet (passthrough guide § Inside the sheet). The sheet hides its ✕; { hideClose: false } brings it back.

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.

Passthrough, attribute form: one attribute per part, pt:<part>, and per part and state, pt:<part>:<state>. Parts: cellColumnHeader, header, item, panel, root, sheet. States: disabled, open, selected.

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

Use [] as the empty model, not null. The pair is kept as picked, so an end before the start is a window across midnight; check the order yourself if yours cannot cross it.

Prevents opening while keeping the activator visible.

Adds the seconds column.

Minute-column granularity and arrow stepping.

Limits what the columns offer without rounding a value that is already off the grid.

Popover/sheet transition duration in milliseconds.

The in-panel toggle already manages it. Bind it only when another control has to read or switch the end being edited.

A wall-clock string with no date or timezone, so 09:00 means nine o'clock in every region. Attach a date before doing any instant arithmetic.

Emitted on every normalization (clamped time).

Only disabled_time: an hour picked next to a minute that is out of range for it is moved to the bound. The picker never reorders a range.

Emitted once the time panel has finished closing.

Emitted as soon as the time panel starts to close.

Emitted as soon as the time panel (the popover, or the sheet on a phone) starts to open.

Emitted once the time panel is open and its open transition has finished.

Relay of the raw column pick, before this component combines it into the value. A host binds this to run its own engine; clean consumers ignore it.

The active range end changed (range only).

Emitted when the selected time changes (single/range/null).

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

Bind props to the clickable element: it carries the click handler, the anchor, the accessible name (aria-labelledby) and the open state.