DatePicker
A date picker built as a wrapper around Popover, Dropdown, Calendar, Button, and Input.
Install
Run the following command to install the date picker component:
npx acc-nuxt add DatePickerComposition
DatePicker is a playground wrapper that composes existing Accelerator components: Button, Input, Popover, Dropdown, and Calendar.
See each component's own documentation page for the props, slots, and CSS variables it exposes.
Single mode
Days
Selected: —
Months
Selected: —
Years
Selected: —
Range mode
Days
Range: — to —
Months
Range: — to —
Years
Range: — to —
Behavior
Close on selection
By default, closeOnSelect is false, so the popover stays open after a single value is selected. Set :close-on-select="true" to close it automatically after selection.
Selected: —
Form
Single
Form values: { "tripleDate": {} } | Form errors: {}
Range
Form values: { "tripleDate": {} } | Form errors: {}
Props
popoverProps:AccPopoverProps— optional
default:{ alignWithCursorX: true }
Props forwarded to the Popover component. See Popover docs.
inputProps:AccInputProps— optional
default:{ validateOnBlur: false, validateOnInput: true }
Props forwarded to the Input component. See Input docs.
calendarProps:AccCalendarProps— optional
default:{ locale: "en" }
Props forwarded to the Calendar component. See Calendar docs.
closeOnSelect:boolean— optional
default:false
Automatically close the popover after a value is selected in single mode when enabled.