BbDatePicker

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 the BbColorPalette activator API.

Which end the time rail edits in range + type="datetime" (v-model:active-segment). Standalone use manages this internally; an embedding host (the date input) drives it from its focused field. Ignored outside range + datetime.

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 (requires type="datetime"); emits stay 24h.

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 calendar.

Disable the automatic flip to the opposite side on overflow.

Render popover content before it is first shown.

First day of the week (0 = Sunday … 6 = Saturday).

Emit plain calendar strings instead of zoned ISO instants. Implied (and forced) by type="month" and type="year".

Accessible label applied to the activator via aria-label.

Maximum selectable value, in this type's shape. A finer bound is accepted and ceiled to the unit, with a warning.

Minimum selectable value, in this type's shape — YYYY-MM-DD (YYYY-MM-DDTHH:mm with datetime, YYYY-MM with month, YYYY with year). A finer bound is accepted and floored to the unit, with a warning.

v-model value. null for empty, a single string for single selection, or a two-element [start, end] array when range is true. The string shape follows type: YYYY-MM-DD when floating (YYYY-MM for month, YYYY for year), otherwise a zoned ISO instant carrying the time inline with type="datetime".

Enables multi-selection: every pick toggles a value in or out of a sorted array, and the panel stays open until it is dismissed. Works in whatever type selects — days, months or years — and requires an array modelValue (use [] for empty, never null). Mutually exclusive with range (two different selection models) and with type="datetime" (the time rail edits one value; with several there is no one it could mean). Both combinations throw.

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 and the year list 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 ✕: its own pt:header is the calendar's navigation bar.

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.

Enables range selection ([start, end]).

Prevents opening while keeping the activator visible.

Adds the seconds column (requires type="datetime").

Predicate invoked per candidate; return false to disable it. Receives the value in this type's shape — YYYY-MM under month, YYYY under year.

Minute-column granularity and arrow stepping (requires type="datetime").

Companion time model (v-model:time), 24-hour HH:mm / HH:mm:ss. With floating it is the only carrier of the time; otherwise it mirrors the time inside modelValue. Requires type="datetime".

Popover/sheet transition duration in milliseconds.

What the picker selects, and therefore what it emits. - date (default) — a day. - datetime — a day plus a time rail beside the calendar. Non-floating values carry the time inside modelValue; with floating the time travels only through time. - month — a month grid emitting YYYY-MM. - year — a year list emitting YYYY. month/year are calendar labels, not instants: they force floating and ignore utc, and the time props (seconds, ampm, step, time) are inert outside datetime.

Emit UTC (...Z) instead of the local offset. Ignored with floating, and therefore with type="month"/type="year".

One date's button label (e.g. #2024_03_15: the local YYYY-MM-DD through slotKey); beats day. Day grid only.

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

Content under one date's cell; beats append:day.

Appends content below each calendar day.

Replaces the day button label inside each calendar day.