EnInputDatepicker

Preview

Props

Name	Description	Default	Control
dateFormat	Accepts a string to format the returned date value based on the mask values below. string	"MM/DD/YYYY"
startDate	Sets the date the calendar should display on first open. Does not change the input value. string | Date	new Date()
defaultToday	Setting to true will set the input value to today's date on mount. Since this is set in the mounted event, updating this on an already mounted component will not work. See 'selectToday' method instead. boolean	false	truefalse
highlightToday	Highlights todays date on the calendar. boolean	false	truefalse
showTodayButton	Adds a button at the bottom of the calendar to automatically select today's date. boolean	false	truefalse
inline	Displays the datepicker as a calendar without a text input. boolean	false	truefalse
datepickerOptions	Accepts an object of settings for the v-calendar datepicker/calendar component. See https://vcalendar.io/calendar/api.html and https://vcalendar.io/datepicker/api.html Record<string, any>	unknown
allowDeselect	When true, clicking the already-selected date in the calendar clears the field, otherwise clicking the selected date closes the calendar popover keeping the selected date value. boolean	false	truefalse
value	Used for a raw value passed into the input. string | number	unknown
name	Sets name attribute for the input. Required for proper form handling. string	null
id	Sets id attribute for input. If left blank, it will default to the name prop. This should always be matched to a label's "for" attribute for proper accessibility. string	null
placeholder	Sets the placeholder value. string	null
label	Used to describe field in error message string	null
disabled	Sets the disabled attribute. boolean	null	truefalse
required	Sets the field to required. boolean	false	truefalse
typeCast	Used to specifically validate different types. string	"string"
mode	Sets when and how often validation occurs. TODO: create docs for modes string	"eager"
displayOnly	Displays the value of the field in a span element, instead of as an input. boolean	false	truefalse
rules	A pipe separated string of validation rules for the field. View validation rules string	""
renderInForm	Prevents a field from being rendered at all when used in the fields prop of the EnForm component. Can be passed a function that returns true or false for conditional validation. boolean | Function	true	truefalse
renderInTable	Prevents a field from generating a column/heading in the EnTableBasic component. Can be passed a function that returns true or false for conditional validation. boolean | Function	true	truefalse
customMessages	Provide a custom error messages by rule. Should be an object with keys that match the rule name and value being a string of the message to display. Record<string, any>	null

Slots

display

No description

Variables

Name	Type	Description
value	unknown	—

Events

blur

No description

change

No description

input

No description

update:model-value

No description

Methods

Name	Description
selectToday	Updates selected value to today.
focus	Focuses the datepicker input element.

Examples

Using datepicker options