BaseDateInput

Form Input Field Component for Date, Date - Date, Date - Time, or Time - Time

for date also a format switch between date | year is available

Props

Prop name	Description	Type	Values	Default
dateType	select date or datetime or a range	string	daterange, datetime, single, timerange	'single'
modelValue	input field settable from outside. attention: if this is an object it needs to contain all the properties (e.g. date_from, time_to) already otherwise only a string will be returned	object|string|date	-
label	label for input field, required for usability purposes, handle showing of label with property showLabel	string	-
showLabel	defines if input label should be visible	boolean	-	true
placeholder	set a placeholder for the input field (object with date and time attribute respectively)	object|string	-	() => ({ date: 'Select Date', time: 'Select Time' })
rangeSeparator	define the range separator	string	-	'–'
format	specify date format. date_year: display tabs that allow for toggle between only choosing year or complete date date_month_year: display tabs that allow for toggle between choosing only year, year and month or complete date	string	day, month, year, date_year, date_month_year	'day'
dateFormatLabels	specify labels displayed instead of 'DD.MM.YYYY' and 'YYYY' should have the form { date: 'xxx', month: 'zzz', year: 'yyy' }	object	-	{ date: 'DD.MM.YYYY', month: 'MM.YYYY', year: 'YYYY' }
formatTabsLegend	a legend for the date format switch buttons	string	-	'Switch between date formats'
language	set calendar language (ISO 639-1). caveat: currently only en, de and fr are supported	string	de, en, fr	'en'
inputId	set id	number|string	-	''
useFormFieldStyling	define if standard form field styling should be used (otherwise no border, no box shadow)	boolean	-	true
showInputBorder	option to have the border of the input field not displayed	boolean	-	true
required	mark as required field (currently only used for aria-required) this can be a string displayed in all fields or specific for one field (key same as for modelValue object)	boolean|object	-	false
invalid	mark the form field as invalid and ideally also provide an error message to display below the form field for an example see BaseInput this can be a string displayed in all fields or specific for one field (key same as for modelValue object)	boolean|object	-	false
disabled	set true if input field should be disabled for an example see BaseInput this can be a string displayed in all fields or specific for one field (key same as for modelValue object)	boolean|object	-	false
errorMessage	add an error message to be displayed below form field if field is invalid for an example see BaseInput this can be a string displayed in all fields or specific for one field (key same as for modelValue object)	string|object	-	''
showErrorIcon	define if error icon should be shown for an example see BaseInput	boolean	-	true
clearable	if true a remove icon will be shown allowing to remove all input at once for an example see BaseInput	boolean	-	false
inputClass	specify additional input field styling	string	-	''
setFocusOnActive	use this prop to deactivate automatic setting of focus as soon as input element becomes active - this might require external handling of focus setting!	boolean	-	true
isActive	in order to be able to set input field active state from outside	boolean	-	false
isActiveDelay	use this prop to set a delay in ms before calender is displayed	number	-	0
inputType	specify input field type for the native HTML <input> element	string	text, search	'text'
assistiveText	provide assistive text for screen readers clearInput: text read for remove input icon if prop clearable is set true this could either be just one string that is used for all fields or an object with field specific text	object	-	{ clearInput: { date_from: 'Clear input from', date_to: 'Clear input to', time_from: 'Clear input from', time_to: 'Clear input to', date: 'clear date', time: 'clear time', } }

Events

Event name	Properties	Description
click-input-field
update:model-value
clicked-outside
value-validated	undefined string, Object - the validated string or input object	this event is emitted when the value was validated in case input should just be considered after date validation
input	undefined string - the input event value however	Event emitted on input, passing input string
update:is-active

Slots

Name	Description	Bindings
label-addition	to add additional elements to the label row
pre-input-field	to add elements within form field but before the input element line for an example see BaseInput
input-field-addition-before	add elements within input form field but before all other elements - this field wraps if necessary for an example see BaseInput
input-field-inline-before	add elements directly in the input line (no wrapping) for an example see BaseInput
post-input-field	for adding elements after input
below-input	to add elements below input fields e.g. add drop down

---

Demo

Date range input fields

Single date input with format 'date_month_year', enabling switching the format

Date Time Input