Date Input

Default Component

<date-input v-model="pickedDate" />

Result

Component Using Input and Output Format

For the input-format

• D/d represents a single or double digit day
• M/m represents a single or double digit month
• DD/dd represents a double digit day (and requires a padding zero with single digits)
• MM/mm represents a double digit month (and requires a padding zero with single digits)
• YYYY/yyyy represents a four digit year

For the output-formatuseDateFormat of VueUse is used and all format options documented there apply.

<date-input
    v-model="pickedDate"
    input-format="D/M/YYYY"
    output-format="DD MMMM YYYY"
/>

Result

Properties

Name	Type	Default	Description
modelValue	Date		The date displayed after applying the output format
inputFormat	String	'YYYY-MM-DD'	The required input format of a string to be interpreted as a date
outputFormat	String	'YYYY-MM-DD'	The output format of an accepted date
showToggle	Boolean	false	When true a toggle is shown which allows a datepicker behavior

Events

Name	Arguments	Description
update:modelValue	pickedDate - Date | Null	emitted when input element receives a blur event or when the close button of a picked date is clicked
toggle-datepicker	datepickerVisibilty - Boolean	emitted when datepicker toggle is clicked