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.

For an element you already hold a ref to. For a bare table cell that needs no slot state, the v-bb-date directive is lighter.

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.

Inherited from the plugin, where it defaults to true. Set :adaptive="false" for a popover on every viewport, including in viewport-independent tests.

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

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). Omitted, the active locale's week start: Monday for it, de, fr, en-gb…, Sunday for bare en (US) and pt (Brazil).

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

Use it for due dates, birthdays and report filters: a calendar day that must read the same in every timezone. Leave it off when the value is an instant.

Accessible label. The activator is named by it followed by the activator's own text ("Due date 12 Sep"), through aria-labelledby.

Make it specific, “Due date for Lindqvist Studio” rather than “Date”, and keep the value visible on the trigger: both are read out together.

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

With type="datetime", add a time (2026-10-31T18:00) when the bound is a moment: on that day the time rail disables the later times.

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.

With type="datetime", add a time (2026-08-30T14:00) when the bound is a moment: on that day the time rail disables the earlier times.

v-model: null when empty, a string, a [start, end] pair with range, or a sorted array with multiple. The string is YYYY-MM-DD when floating (YYYY-MM / YYYY for month / year), otherwise a zoned ISO instant (carrying the time under datetime).

Multi-selection: each pick toggles a value in a sorted array (days, months or years), and the panel stays open until dismissed. Needs an array modelValue ([] when empty, never null). Throws with range or type="datetime".

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: arrow, cellColumnHeader, day, dayButton, header, item, month, monthItem, panel, root, sheet, year, yearItem. States: active, disabled, highlighted, inRange, open, outside, rangeEnd, rangeStart, selected, today.

Enables range selection ([start, end]).

Keep the model an array, with [] as the empty state.

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.

For rules a window cannot express, such as weekdays or stock. Rejected dates are already disabled and announced, so do not add a click guard of your own.

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 emits: date (a day), datetime (a day plus a time rail), month (YYYY-MM) or year (YYYY). month / year force floating, ignore utc, and leave the time props inert.

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

Only when the receiving API requires a Z timestamp. The default local offset is the same instant, and reading accepts both.

With floating it is the only place the time is stored, so bind it. The model is 24-hour whatever ampm displays.

Relay of the raw calendar-grid pick, before the calendar combines it with the time. An embedding host binds this to run its own value engine; clean consumers ignore it and use update:modelValue.

Emitted once the calendar surface has finished closing.

Emitted as soon as the calendar surface starts to close.

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

Emitted once the calendar surface is open and its open transition has finished.

Relay of the raw time-rail pick. An embedding host binds this to run its own value engine; clean consumers ignore it and use update:time.

The active range end changed (range + type="datetime" only).

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

Companion time model, alongside every change while type="datetime".

One date's button label (e.g. #2024-03-15: the local YYYY-MM-DD, which slotKey leaves as it is); beats day. Day grid only.

Named after the local date exactly as written: #2026-12-25.

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

For a marker under one fixed date, such as #append:2026-12-25. It wins over append:day on that date.

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

Its props carry the click handler, the anchor, the accessible name (aria-labelledby) and the open state; bind all of them to the clickable element.

Replaces the day button label inside each calendar day.

Appends content below each calendar day.

The lighter choice for a marker under the number. Reach for day only to replace the number itself.