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
type	select date or datetime or a range	string	daterange, datetime, single, timerange	'single'
v-model	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'
id	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)	boolean	-	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	boolean	-	false
disabled	set true if input field should be disabled for an example see BaseInput	boolean	-	false
errorMessage	add an error message to be displayed below form field if field is invalid for an example see BaseInput	string	-	''
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

Events

Event name	Properties	Description
input	undefined string - the input event value however	Event emitted on input, passing input string
update:is-active	undefined boolean - is input field active	replace BaseInput state with BaseDateInput field active state and propagate this one
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
clicked-outside	undefined MouseEvent - the native Event	emit a custom clicked-outside event instead of BaseInput event (propagation stopped)
click-input-field	undefined MouseEvent - the native Event	event additionally triggered to BaseInput default click-input-field to also set field active if component sourroundings are clicked
selected	undefined string, Object - the input string or object	emit an event when focus leaves the input

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