BbDatePickerInput

On mobile the calendar opens inside a bottom off-canvas sheet instead of a floating popover, mirroring the adaptive behaviour of BbPopover/BbSelect. When unset, falls back to the global config.adaptive.

On by default in v3. Set :adaptive="false" to keep the popover on every viewport.

12-hour display with an AM/PM segment (requires type="datetime"). Purely a field-composition concern: modelValue and the time model stay 24-hour regardless. Type A/P (or ArrowUp/Down) to set the meridiem.

Name of the icon to be added at the end of the input.

Guides the browser as to the type of information expected in the field.

Focuses the field when it mounts (a dialog already open included), unless the user is typing in another field.

Displays a clear button when the input has a value and is being interacted with.

Compact density: the field uses the -compact twins of --bb-input-h, --bb-input-py and --bb-label-spacing-y, so a --bb-input-h set on the component is ignored while it is on. Size a compact field with --bb-input-h-compact (and --bb-input-py-compact).

Text between the label and the input. Unlike the hint it is always visible; it joins the input's aria-describedby after any errors / warnings, before the hint.

Disables the calendar: hides the trigger button and prevents the popover from opening. Use 'desktop' to disable it on desktop only (keeping the calendar for mobile, complementing disableWriting: 'mobile') or 'mobile' to disable it on mobile only.

Replaces v2 hide-popover; the v2 token not-mobile becomes desktop.

Disables the component.

Disables typing into the input. Use 'mobile' to disable typing only on mobile, 'desktop' to disable typing only on desktop.

Replaces v2 allow-writing, with the polarity inverted; the v2 token not-mobile becomes mobile.

Error messages under the field, a string or array, in an aria-live="polite" region and first in the control's aria-describedby, so they are re-read when it regains focus.

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

If true the date will have a format YYYY-MM-DD instead of the default ISO string.

Use it when “2027-01-01” must stay that day everywhere. Leave it off for an instant; seed a floating value, or start empty, on server-rendered pages.

Keep this control out of the enclosing BbForm entirely: not submitted, not dirty, not reset, not validated. For a control that is not form data (a filter, a "show advanced" switch).

Define if the component should be in an error state. It usually attaches a CSS class for styling purposes.

Define if the component should be in a warning state. Same chrome as errors with --bb-warn; errors take priority.

Visually hides the label of the input while maintaining accessibility.

Text box to be displayed near the input, usually to indicate instructions.

The id of the native control; the label's for and the description and message ids derive from it. Generated when omitted.

Vertical position of the control in a side-by-side row; not inputPosition, the horizontal one. Omitted, the control's first line meets the label's.

Text content of the label of the element.

Vertical position of the label block in a side-by-side row; not labelPosition, the horizontal one. Omitted, the label's first line meets the control's.

Label rendering mode.

Sets the text alignment of the label.

How label and input sit together: 'vertical', 'horizontal' (50/50), 'auto', 'label-fill', 'input-fill', a ratio like 'xx xxxxx', or a per-breakpoint map ({ default: 'vertical', md: 'xx xxxxx' }).

Sets the component in a loading state, usually triggering some visual styles.

Maximum selectable date in YYYY-MM-DD format — or, with type="datetime", YYYY-MM-DDTHH:mm to tighten the boundary day to a minute. Values outside both patterns throw during setup to surface configuration mistakes.

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

Minimum selectable date in YYYY-MM-DD format — or, with type="datetime", YYYY-MM-DDTHH:mm to tighten the boundary day to a minute. Values outside both patterns throw during setup to surface configuration mistakes.

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

Used by v-model. Can be null, a single string, or an array of strings based on whether a range or single date is needed.

Defines the name of the input.

The key the value is submitted under: in a native form post or FormData, and inside a BbForm, which falls back to a slug of the label without it.

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.

v2 spelled it offcanvas-props; the old name falls through as an attribute and does nothing.

Keeps the hint displayed.

Text shown while the field is empty.

Name of the icon to be added at the start of the input.

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: activator, arrow, box, cellColumnHeader, clear, day, dayButton, description, header, hint, icon, input, item, label, message, month, monthItem, panel, prefix, root, sheet, spinner, suffix, year, yearItem. States: active, disabled, errors, ghost, hasValue, highlighted, inRange, loading, open, outline, outside, rangeEnd, rangeStart, readonly, secondary, selected, today, warnings.

Selects a range of dates between two dates. It selects all of the days between start and end.

Keep the model an array: seed and clear it with [].

Sets the input in a readonly state.

Sets the input as required.

Reverses the layout. Applicable in every direction the order of the label and the input is swapped.

vee-validate rules for this field. Only inside a BbForm.

Adds the seconds segment (requires type="datetime"). Without it, an incoming value carrying seconds displays truncated and is left untouched until the user commits an edit, at which point seconds zero out.

Function that accepts a string object and returns a boolean. false meaning the date cannot be selected.

Minute granularity for the calendar's minute column and arrow stepping (requires type="datetime"). Constrains what the component produces, never what it accepts: a typed off-grid value (e.g. 10:07 with step: 15) is emitted verbatim, and no column row highlights for it.

v-model:time: the time part, always 24-hour HH:mm / HH:mm:ss. With floating it is the only carrier of the time; otherwise it mirrors modelValue's, and writing it rewrites that. Requires type="datetime".

Transition duration, in milliseconds, for the popover appearance.

What the field edits, and so its segments and emitted shape: date (DD/MM/YYYY), datetime (adds the time segments and rail), month (MM/YYYY, emits YYYY-MM) or year (YYYY). month / year force floating, ignore utc, and leave the time props inert.

Emits UTC ISO strings (…Z) instead of the local offset (…+01:00). Emission only: incoming values parse the same either way, and the field always displays local time. Ignored with floating.

Only when the receiving API requires a Z timestamp (the v2 format). Reading accepts both, so stored values need no rewrite.

The field's name in validation messages ({field}): "Email is not valid". Defaults to the label (or legend), then "This field"; never the name. Set it when the label is hidden or reads badly in a sentence (icon-only, a question). BbForm only.

When the field validates: aggressive (each change), balanced (on leave, then live while in error), lazy (on leave), submit-only, submit-live. Unset: the BbForm's validation-mode, then formControls.validationMode ('balanced'). BbForm only.

The field box's look, with BbButton's names and tokens. Colours only, so a form never reflows; 'ghost' has no border in any state, 'none' no look at all (you own hover, focus and the states). Register more with the plugin's inputVariants.

Warning messages under the field, a string or array: amber, in their own aria-live region and in the control's aria-describedby after the errors. Non-empty turns on the warning state; errors win when both are set.

With floating it is the only carrier of the time, so bind it.

Emitted when the composite control receives focus (first focusin after being inactive).

Emitted alongside every value normalization or removal when the typed date is invalid or out of range. See DatePickerInputError for the full code map and payload shapes.

Turn the payload into a message through errors. Clear that message on active, not on the model update the normalization itself caused.

Emitted when a native text field inside the control gains focus. Forwards the original DOM FocusEvent.

Emitted once the calendar surface has finished closing.

Emitted as soon as the calendar surface starts to close.

Emitted when focus/click moves outside the entire composite control.

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.

Emitted whenever the selected date value changes. Payload is null for cleared values, a single string for single-date mode, or a two-element array for range mode.

Companion time model (v-model:time), emitted alongside every value change while type="datetime" is on. Always 24-hour HH:mm (or HH:mm:ss with seconds); null when cleared, an array in range mode.

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.

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

Content rendered after the date fields, at the end of the field box (before the calendar toggle button).

Content rendered after the entire date picker control, outside the input chrome.

Replaces the day button label inside each calendar day.

Appends content below each calendar day.

Replaces the description text. Provided alone (no description prop) it still renders the description region and wires it into aria-describedby.

Replaces the default label text rendered above the date picker.

Inline content rendered at the start of the input field area, before the date fields.

Content rendered before the date fields, at the start of the field box.

Content rendered before the entire date picker control, outside the input chrome.

Inline content rendered at the end of the input field area, after the date fields.