VDateInput API

Props

name	type	default
`active`	boolean	false
Controls the active state of the item. This is typically used to highlight the component.
`allowed-dates`	unknown[] \| ((date: unknown) => boolean)	undefined
Restricts which dates can be selected.
`allowed-months`	number[] \| ((date: number) => boolean)	undefined
Restricts which months can be selected.
`allowed-years`	number[] \| ((date: number) => boolean)	undefined
Restricts which years can be selected.
`append-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	undefined
Creates a v-icon component after default content in the append slot.
`append-inner-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	undefined
Creates a v-icon component in the append-inner slot.
`autocomplete`	string	undefined
Helps influence browser’s suggestions. Special value suppress manipulates fields `name` attribute while off relies on browser’s good will to stop suggesting values. Any other value is passed to the native `autocomplete` on the underlying element.
`autofocus`	boolean	false
Enables autofocus.
`base-color`	string	undefined
Sets the color of the input when it is not focused.
`bg-color`	string	undefined
Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`border`	string \| number \| boolean	false
Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border="sm"`). Find a list of the built-in border classes on the borders page.
`cancel-text`	string	'$vuetify.confirmEdit.cancel'
Text for the cancel button
`center-affix`	boolean	undefined
Vertically align appendInner, prependInner, clearIcon and label in the center.
`clearable`	boolean	false
Allows for the component to be cleared.
`clear-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	'$clear'
The icon used when the clearable prop is set to true.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`control-height`	string \| number	undefined
Sets the height of the controls.
`control-variant`	'docked' \| 'modal'	'docked'
docked: Separate control groups for month and year. modal: Month and year are displayed together, clicking the text opens a month picker, clicking the dropdown arrow opens a year picker. There are also arrow buttons to scroll between months.
`counter`	string \| number \| boolean	false
Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.
`counter-value`	number \| ((value: any) => number)	undefined
Function returns the counter display text.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`dirty`	boolean	false
Manually apply the dirty state styling.
`disabled`	boolean	null
Removes the ability to click or target the input.
`display-format`	string \| ((date: unknown) => any)	undefined
The format of the date that is displayed in the input. Can use any format here or a custom function.
`divided`	boolean	false
Adds a divider between the header and controls.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`error`	boolean	false
Puts the input in a manual error state.
`error-messages`	string \| string[]	[]
Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation.
`event-color`	\| string \| boolean \| string[] \| Record<string, string \| boolean \| string[]> \| ((date: string) => string \| boolean \| string[])	null
Sets the color for event dots. It can be string (all events will have the same color) or `object` where attribute is the event date and value is boolean/color/array of colors for specified date or `function` taking date as a parameter and returning boolean/color/array of colors for that date.
`events`	\| string[] \| ((date: string) => string \| boolean \| string[]) \| Record<string, string \| boolean \| string[]>	null
Array of dates or object defining events or colors or function returning boolean/color/array of colors.
`first-day-of-week`	string \| number	undefined
Sets the first day of the week, starting with 0 for Sunday. (Note: not guaranteed to work when using custom date adapters.)
`first-day-of-year`	string \| number	undefined
Sets the day that determines the first week of the year, starting with 0 for Sunday. For ISO 8601 this should be 4. (Note: not guaranteed to work when using custom date adapters.)
`flat`	boolean	false
Removes box shadow when using a variant with elevation.
`focused`	boolean	false
Forces a focused state styling on the component.
`glow`	boolean	false
Makes prepend/append icons full opacity when the field is focused and apply color.
`header`	string	'$vuetify.datePicker.header'
Text shown when no display-date is set.
`header-color`	string	undefined
Allows you to set a different color for the header when used in conjunction with the `color` prop.
`header-date-format`	string	'normalDateWithWeekday'
Allows you to customize the format of the date selection text that appears in the header of the calendar.
`hide-actions`	boolean	true
Hide the Cancel and OK buttons, and automatically update the value when a date is selected.
`hide-details`	boolean \| 'auto'	false
Hides hint and validation errors. When set to `auto` messages will be rendered only if there’s a message (hint, error message, counter value etc) to display.
`hide-header`	boolean	true
Hides the header.
`hide-spin-buttons`	boolean	false
Hides spin buttons on the input when type is set to `number`.
`hide-title`	boolean	false
Hide the picker title.
`hide-weekdays`	boolean	false
Hides the weekdays.
`hint`	string	undefined
Displays hint text below the input when focused. Force this always open with the persistent-hint property.
`icon-color`	string \| boolean	false
Sets the color of the prepend/append icons.
`id`	string	undefined
Sets the DOM id on the component.
`indent-details`	boolean	null
Adds / removes inline padding in inputs details. Useful when trying to align different variants of fields and selection controls.
`input-format`	string	undefined
Format for manual date input. Use yyyy, mm, dd with separators ‘.’, ‘-’, ‘/’ (e.g. ‘yyyy-mm-dd’, ‘dd/mm/yyyy’).
`label`	string	undefined
Sets the text of the v-label or v-field-label component.
`landscape`	boolean	false
Changes the picker to landscape mode.
`landscape-header-width`	string \| number	undefined
Sets header width when in landscape mode.
`loading`	string \| boolean	false
Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it’s supported by the component) or the primary color.
`location`	Anchor	'bottom start'
Specifies the date picker’s location. Can combine by using a space separated string.
`max`	unknown	undefined
Maximum allowed date/month (ISO 8601 format).
`max-errors`	string \| number	1
Control the maximum number of shown errors from validation.
`max-width`	string \| number	undefined
Sets the maximum width for the component.
`menu`	boolean	false
Renders with the menu open by default.
`menu-props`	unknown	undefined
Pass props through to the `v-menu` component. Accepts an object with anything from v-menu props, camelCase keys are recommended.
`messages`	string \| string[]	[]
Displays a list of messages or a single message if using a string.
`min`	unknown	undefined
Minimum allowed date/month (ISO 8601 format).
`min-width`	string \| number	undefined
Sets the minimum width for the component.
`mobile`	boolean	null
Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint
`mobile-breakpoint`	number \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'	undefined
Overrides the display configuration default screen size that the component should be considered in mobile.
`mode-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	'$subgroup'
Icon displayed next to the current month and year, toggles year selection when clicked.
`model-value`	unknown	undefined
Represents the committed v-model value
`month`	string \| number	undefined
Sets the month.
`multiple`	number \| boolean \| (string & {}) \| 'range'	false
Allow the selection of multiple dates. The range value selects all dates between two selections.
`name`	string	undefined
Sets the component’s name attribute.
`next-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	'$next'
Sets the icon for next month/year button.
`no-month-picker`	boolean	false
Only applies to `controlVariant="modal"`, the month and year picker buttons are combined into one that only opens the year picker.
`ok-text`	string	'$vuetify.confirmEdit.ok'
Text for the ok button
`persistent-clear`	boolean	false
Always show the clearable icon when the input is dirty (By default it only shows on hover).
`persistent-counter`	boolean	false
Forces counter to always be visible.
`persistent-hint`	boolean	false
Forces hint to always be visible.
`persistent-placeholder`	boolean	false
Forces placeholder to always be visible.
`picker-props`	unknown	undefined
Pass props through to the picker component. Intended for props that conflict with `v-text-field` (`color`, `width`, `rounded`, etc.)
`placeholder`	string	undefined
Sets the input’s placeholder text.
`position`	'fixed' \| 'relative' \| 'absolute' \| 'static' \| 'sticky'	undefined
Sets the position for the component.
`prefix`	string	undefined
Displays prefix text.
`prepend-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	'$calendar'
Prepends an icon to the outside the component’s input, uses the same syntax as `v-icon`.
`prepend-inner-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	undefined
Creates a v-icon component in the prepend-inner slot.
`prev-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	'$prev'
Sets the icon for previous month/year button.
`readonly`	boolean	false
Puts input in readonly state.
`reverse`	boolean	false
Reverses the orientation.
`reverse-transition`	string	'picker-reverse-transition'
The transition used when changing months into the past
`role`	string	undefined
The role attribute applied to the input.
`rounded`	string \| number \| boolean	undefined
Adds a border radius to the input.
`rules`	( \| string \| boolean \| PromiseLike<ValidationResult> \| ((value: any) => string \| false \| true) \| ((value: any) => PromiseLike<ValidationResult>) \| [string, any, string] )[]	[]
Accepts a mixed array of types `function`, `boolean` and `string`. Functions pass an input value as an argument and must return either `true` / `false` or a `string` containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`.
`show-adjacent-months`	boolean	true
Toggles visibility of days from previous and next months.
`show-week`	boolean	false
Toggles visibility of the week numbers in the body of the calendar.
`single-line`	boolean	false
Label does not move on focus/dirty.
`suffix`	string	undefined
Displays suffix text.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`text`	string	undefined
Specify content text for the component.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes any applied border-radius from the component.
`title`	string	'$vuetify.datePicker.title'
Specify a title text for the component.
`transition`	string	'picker-transition'
The transition used when changing months into the future
`type`	string	'text'
Sets input type.
`update-on`	('blur' \| 'enter')[]	['blur', 'enter']
Specifies when the text input should update the model value. If empty, the text field will go into read-only state.
`validate-on`	\| 'eager' \| 'lazy' \| 'blur' \| 'input' \| 'submit' \| 'invalid-input' \| 'blur lazy' \| 'input lazy' \| 'submit lazy' \| 'invalid-input lazy' \| 'blur eager' \| 'input eager' \| 'submit eager' \| 'invalid-input eager' \| 'lazy blur' \| 'lazy input' \| 'lazy submit' \| 'lazy invalid-input' \| 'eager blur' \| 'eager input' \| 'eager submit' \| 'eager invalid-input'	undefined
Change what type of event triggers validation to run.
`validation-value`	any	undefined
The value used when applying validation rules.
`variant`	\| 'outlined' \| 'plain' \| 'underlined' \| 'filled' \| 'solo' \| 'solo-inverted' \| 'solo-filled'	'filled'
Applies a distinct style to the component.
`view-mode`	'month' \| 'year' \| 'months'	'month'
Determines which picker in the date or month picker is being displayed. Allowed values: `'month'`, `'months'`, `'year'`.
`weekday-format`	'long' \| 'short' \| 'narrow'	undefined
Allows you to customize the format of the weekday string that appears in the body of the calendar. Uses `'narrow'` by default. (Note: not guaranteed to work when using custom date adapters.)
`weekdays`	(0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6)[]	[0, 1, 2, 3, 4, 5, 6]
An array of weekdays to display. Does not affect the order.
`weeks-in-month`	'static' \| 'dynamic'	'static'
A dynamic number of weeks in a month will grow and shrink depending on how many days are in the month. A static number always shows 7 weeks.
`width`	string \| number	undefined
Width of the picker.
`year`	number	undefined
Sets the year.

Events

name	type
`cancel`	[]
The event emitted when the user clicks the Cancel button
`click:append`	[MouseEvent]
Emitted when append icon is clicked.
`click:appendInner`	[MouseEvent]
Emitted when appended inner icon is clicked.
`click:clear`	[MouseEvent]
Emitted when clearable icon clicked.
`click:prepend`	[MouseEvent]
Emitted when prepended icon is clicked.
`click:prependInner`	[MouseEvent]
Emitted when prepended inner icon is clicked.
`save`	[unknown]
The event emitted when the user clicks the Save button
`update:focused`	[boolean]
Emitted when the input is focused or blurred
`update:menu`	[boolean]
Event that is emitted when the component’s menu state changes.
`update:modelValue`	[unknown]
Event that is emitted when the component’s model changes.

Slots

{ save: () => void; cancel: () => void; isPristine: boolean }

{
  id: ComputedRef<string>
  messagesId: ComputedRef<string | undefined>
  isDirty: ComputedRef<boolean>
  isDisabled: ComputedRef<boolean>
  isReadonly: ComputedRef<boolean>
  isPristine: Ref<boolean, boolean>
  isValid: ComputedRef<boolean | null>
  isValidating: Ref<boolean, boolean>
  hasDetails: Ref<boolean, boolean>
  reset: () => void
  resetValidation: () => void
  validate: () => void
}

{
  isActive: Ref<boolean, boolean>
  isFocused: Ref<boolean, boolean>
  iconColor: ComputedRef<string | undefined>
  controlRef: Ref<HTMLElement | undefined, HTMLElement | undefined>
  focus: () => void
  blur: () => void
}

{
  isActive: Ref<boolean, boolean>
  isFocused: Ref<boolean, boolean>
  iconColor: ComputedRef<string | undefined>
  controlRef: Ref<HTMLElement | undefined, HTMLElement | undefined>
  focus: () => void
  blur: () => void
} & { props: Record<string, any> }

{ counter: string; max: string | number; value: string | number }

{ props: { onClick: () => void }; item: any; i: number }

never

{
  id: ComputedRef<string>
  messagesId: ComputedRef<string | undefined>
  isDirty: ComputedRef<boolean>
  isDisabled: ComputedRef<boolean>
  isReadonly: ComputedRef<boolean>
  isPristine: Ref<boolean, boolean>
  isValid: ComputedRef<boolean | null>
  isValidating: Ref<boolean, boolean>
  hasDetails: Ref<boolean, boolean>
  reset: () => void
  resetValidation: () => void
  validate: () => void
}

{ header: string; transition: string }

{
  isActive: Ref<boolean, boolean>
  isFocused: Ref<boolean, boolean>
  iconColor: ComputedRef<string | undefined>
  controlRef: Ref<HTMLElement | undefined, HTMLElement | undefined>
  focus: () => void
  blur: () => void
} & { label: string; props: Record<string, any> }

{ color: string; isActive: boolean }

{ message: string }

{
  month: { text: string; value: number }
  i: number
  props: { onClick: () => void }
}

{
  id: ComputedRef<string>
  messagesId: ComputedRef<string | undefined>
  isDirty: ComputedRef<boolean>
  isDisabled: ComputedRef<boolean>
  isReadonly: ComputedRef<boolean>
  isPristine: Ref<boolean, boolean>
  isValid: ComputedRef<boolean | null>
  isValidating: Ref<boolean, boolean>
  hasDetails: Ref<boolean, boolean>
  reset: () => void
  resetValidation: () => void
  validate: () => void
}

{
  isActive: Ref<boolean, boolean>
  isFocused: Ref<boolean, boolean>
  iconColor: ComputedRef<string | undefined>
  controlRef: Ref<HTMLElement | undefined, HTMLElement | undefined>
  focus: () => void
  blur: () => void
}

never

{
  year: { text: string; value: number }
  i: number
  props: {
    active: boolean
    color: string
    rounded: boolean
    text: string
    variant: 'flat' | 'text'
    onClick: () => void
  }
}

`actions`
Slot for the actions.
`append`
Adds an item inside the input and after input content.
`append-inner`
Slot that is appended to the input.
`clear`
Slot for custom clear icon (displayed when the clearable prop is equal to true).
`counter`
Slot for the input’s counter text.
`day`
Slot for a day in the month.
`default`
The default Vue slot.
`details`
Slot for custom input details to modifying the display of messages.
`header`
Slot for the header.
`label`
The default slot of the v-label or v-field-label component.
`loader`
Slot for custom loader (displayed when loading prop is equal to true).
`message`
Slot used to customize the message content.
`month`
Slot for the month.
`prepend`
Adds an item outside the input and before input content.
`prepend-inner`
Slot that is prepended to the input.
`title`
Slot for the component’s title content.
`year`
Slot for the year.

Exposed

HTMLElement

string[]

string

boolean

() => Promise<void>

() => Promise<void>

(silent: boolean) => Promise<string[]>

`controlRef`
Reference to the control element of the field.
`errorMessages`
An array of error messages that were set by the `setErrors` method.
`fieldIconColor`
The color of the icon.
`isValid`
Boolean indicating if the input is valid.
`reset`
Resets the input value.
`resetValidation`
Resets validation of the input without modifying its value.
`validate`
Validates the input’s value.

#VDateInput API

VDateInput API