DatePicker API

API reference docs for the Stash DatePicker component. Learn about the props, CSS, and other APIs of this exported module.

Import

import DatePicker from '@leaflink/stash/DatePicker.vue';

Props

Name	Type	Default	Description
addBottomSpace	boolean	false	Passed to the addBottomSpace prop in the Field component; it adds spacing under the field that is consistent whether or not hint/error text is displayed.
availableDates	Array	undefined	Dates or date range objects that are available for selection or navigation. All other dates are disabled.
disabled	boolean	false	Whether the input is disabled
disabledDates	Array	undefined	Dates that are disabled from user selection or navigation.
enableTeleport	boolean	false	Adds default modifiers to make the calendar popover teleport; useful in preventing the calendar popover from getting hidden behind its containing element. Although we are not using vue teleport, this name is to future-proof the prop name for when the vCalendar is updated to use teleport internally.
errorText	string	''	Error text to display. Replaces `hintText` (if provided) & adds error styling.
format	string	'DATE_FORMATS.YYYY_MM_DD_DATE_FNS'	Date Format required for date-fns-tz formatInTimeZone()
hideClearButton	boolean	false	If true, show clear button
hintText	string	''	Hint text to display below the input
id	string	''
isInputReadonly	boolean	false	Disables text input. Only the calendar popover can update the date value.
label	string	''	Label to render for the datepicker
maxDate	Date	undefined	Prevents access to portion of the calendar AFTER the specified MAX date. Disables click events for all other dates outside of the min-max ranges.
maxPage	{ month: number; year: number; }	undefined	Latest page (month, year) that the user can navigate to.
minDate	Date	undefined	Prevents access to portion of the calendar before the specified MIN date. Disables click events for all other dates outside of the min-max ranges.
minPage	{ month: number; year: number; }	undefined	Earliest page (month, year) that the user can navigate to.
mode	"date" | "dateTime" | "time"	date	Mode (date, time, datetime)
modelValue	string	''	Initial value to pass to the datepicker
name	string	''	`name` property for datepicker's input
placeholder	string	undefined	`placeholder' property for datepicker input
popoverOptions	DatePickerPopoverOptions	-	Popover configuration; v-calendar uses Popover internally.
timeZone	string	'UTC'	`timezone` TZ DB time zone property

Slots

Name	Description
hint

Events

Name	Description
update:model-value
blur