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.

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.

Sets autofocus on page load.

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

Sets the component in a compact state.

Descriptive text displayed below the label and above the input. Unlike the hint it is always visible, and it is linked to the input via aria-describedby (after any errors / warnings, before the hint).

Direction of the layout of the component. Can either be a predefined value or a pattern separated by a space like xx xxxxx.

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.

Disables the component.

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

Can be a string or an array of string containing the messages to display. They render in an aria-live="polite" region (announced when they appear) and, while the list is non-empty, are referenced FIRST from the control's aria-describedby, so the reason the field is invalid is re-read whenever the control regains focus.

Defines the first day of the week with 0 meaning Sunday and 6 meaning Saturday.

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

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 identifier of the component.

Text content of the label of the element.

Label rendering mode.

Sets the text alignment of the label.

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.

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.

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.

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.

Keeps the hint displayed.

String displayed when there's no data.

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.

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

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.

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.

Companion model for the time part (v-model:time), always 24-hour HH:mm / HH:mm:ss regardless of display. With floating it is the only carrier of the time; otherwise it mirrors the time inside modelValue (same digits) and writing it rewrites the model's time part. Requires type="datetime".

Transition duration, in milliseconds, for the popover appearance.

What the field edits, and therefore its segments and emitted shape. - date (default) — DD/MM/YYYY. - datetime — adds the time segments and the calendar's time rail. - month — MM/YYYY, emitting YYYY-MM. - year — YYYY, emitting YYYY. month/year are calendar labels: they force floating, ignore utc, and make the time props (seconds, ampm, step, v-model:time) inert.

Emits values as UTC ISO strings (...Z) instead of ISO strings carrying the local offset (...+01:00). Emission-only: incoming values are parsed identically either way, so the prop can be added or removed without touching stored values. Fields always display local time — UTC is a backend concern. Ignored when floating is set (a plain date has no zone).

Visual variant of the field box — the same names and tokens as the BbButton variants. Colours only: height, padding and border width are identical across variants, so a form never reflows when one changes. 'ghost' has no border in any state (errors and warnings show through the icon and the messages); every variant keeps the focus ring. Register extra names with the plugin's inputVariants option.

Warning messages to display beneath the field, in their own aria-live region and amber (--bb-text-warn). A string or array; a non-empty list implies the warning state. Errors suppress warnings when both are set. While displayed they are also referenced from the control's aria-describedby, after any errors and before the description/hint.

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

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.

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

Appends content below each calendar day.

Replaces the day button label inside 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.