Date Input
#

Date Input component is a combination of Date Picker and Input components. You can find usage examples using following links:

Date Picker

Input

Examples
#

Basic usage
#

Reset on close
#

There is a prop resetOnClose for range mode. If user selected incomplete range and closed dropdown, then used last complete value.

Reset on close (resetOnClose = true)

Don't reset on close (resetOnClose = false)

IsOpen
#

IsOpen prop allows you to force show dropdown as opened.

Input props
#

You can pass properties to VaDateInput

Formatting
#

You can pass the format function to VaDateInput which will format input text like you want to. This way you can use any format that you want. For example, you can use date-fns.

Date Manual Input
#

You can add manual-input attribute to allow user input text from keyboard manually.

Parsing
#

You can pass the parse function to VaDateInput which will parse input text like you want to. This way you can use any format that you want. For example, you can use date-fns to parse date string. By default we parse this input using standard Date.parse method.

Advanced formatting
#

If you need specific format for multiple or range modes you can use.

View
#

You can set specific view for date picker. With view prop you can define how date picker will displayed, year and month that will be shown.

You can easily use your format functions for all VaDateInputs using Global Config feature.

import { createVuestic } from 'vuestic-ui'

createApp(App)
  .use(createVuestic({
    config: {
      icons: [ /* ... */ ],
      components: {
        VaDateInput: {
          formatDate: (date) => {
            // ...
          },
          parseDate: (str) => {
            // ...
          }
        }
      },
      colors: { /* ... */ },
    },
  }))
  .mount('#app')

Validation
#

Validation works the same way as VaInput validation, except rules functions should accept Date instead of string.

Mode
#

You can use date input in three different ways. By default date input uses auto mode. This means that mode will be chosen based on modelValue. There is three modes: single, multiple and range. Different modes require different model values.

Single mode

Multiple mode

Range mode

API
#

Name	Description	Types	Default
allowed-days	Function that accepts date and return `false` if day is not allowed	`Function`	-
allowed-months	Function that accepts date and return `false` if month is not allowed	`Function`	-
allowed-years	Function that accepts date and return `false` if year is not allowed	`Function`	-
anchor-selector	Anchor CSS selector instead of passing slot	`String`	`""`
aria-label	The aria-label of the anchor slot	`String`	`"$t:toggleDropdown"`
aria-next-period-label	The aria-label of the "next period" button	`String`	`"$t:nextPeriod"`
aria-previous-period-label	The aria-label of the "previous period" button	`String`	`"$t:previousPeriod"`
aria-reset-label	The aria-label of the "reset" button	`String`	`"$t:resetDate"`
aria-selected-date-label	The aria-label of the input of the component if aria-label is not set	`String`	`"$t:selectedDate"`
aria-switch-view-label	The aria-label of the "switch view" button	`String`	`"$t:switchView"`
aria-toggle-dropdown-label	The aria-label of the "toggle dropdown list" button	`String`	`"$t:toggleDropdown"`
auto-placement	If dropdown doesn't fit viewport, it will be placed automatically to fit viewport	`Boolean`	`true`
background	The color name of the backgound color	`String`	`"background-element"`
bordered	Applies underscore	`Boolean`	`false`
clear-value	Default input field value	`Date`	-
clearable	Adds a button to reset the input field value	`Boolean`	`false`
clearable-icon	Sets the cleaning button icon.	`String`	`"va-clear"`
close-on-anchor-click	Dropdown will be closed when anchor is clicked	`Boolean`	`true`
close-on-click-outside	Dropdown will be closed when clicked outside dropdown content and anchor	`Boolean`	`true`
close-on-content-click	Dropdown will be closed when clicked inside dropdown content	`Boolean`	`false`
color	Sets input color	`String`	`"primary"`
cursor	Dropdown will be rendered relative to cursor position	`Boolean`	`false`
delimiter	The delimiter used when turning model value to string	`String`	`", "`
disabled	Disable the input	`Boolean`	`false`
end-year	Last year that user can choose. By default is current year plus 50 years	`Number`	`2073`
error	Sets input state to error	`Boolean`	-
error-count	Number of error messages displayed	`String \| Number`	`1`
error-messages	Displays a list of error messages or message if using a string	`Array \| String`	-
first-weekday	Name of first weekday. Can be `Monday` or `Sunday`	`String`	`"Sunday"`
firstWeekday	Name of first weekday. Can be `Monday` or `Sunday`	`'Monday' \| 'Sunday'`
format	Function that accepts picker value and should transform it to text for input	`Function`	-
format-date	Function that accepts picker value and transforms it to the string	`Function`	e=>e.toLocaleDateString()
hide-week-days	Hide weekday names on top of day picker	`Boolean`	`false`
highlight-today	If `true` today date will be colored	`Boolean`	`true`
highlight-weekend	If `true` weekend will be colored	`Boolean`	`false`
hover-out-timeout	Time in `ms` after mouse leave dropdown before it will be closed	`Number`	`200`
hover-over-timeout	Time in `ms` after mouse enter dropdown before it will be opened	`Number`	`30`
icon	Sets an icon.	`String`	`"va-calendar"`
immediate-validation	Sets the validation to be performed when the component is mounted	`Boolean`	`false`
is-content-hoverable	If true, dropdown content will be hoverable	`Boolean`	`true`
is-open	Value for dropdown. If `true`, then dropdown is shown	`Boolean`	-
keep-anchor-width	If true, dropdown content will have exact same width as anchor	`Boolean`	`false`
label	Sets input label	`String`	`""`
left-icon	Sets the icon position to the left.	`Boolean`	`false`
loading	Indicates that something is loading (spinner icon).	`Boolean`	`false`
manual-input	Allows user to manually input date in VaInput	`Boolean`	`false`
messages	Displays a list of messages or message if using a string	`Array \| String`	`[]`
mode	Specify if picker value is single date, multiple dates or date range.	`'single' \| 'multiple' \| 'range'`	`"auto"`
model-value	Date, date array or date period	`Date \| Array \| Object \| String \| Number`	-
modelValue	Date, date array or date period	`Date \| Date[] \| { start: Date \| null, end: Date \| null }`
month-names	Array of 12 month names	`Array`	`[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]`
name	Applies `name` to internal input component. Useful for native forms.	`String`	-
offset	Dropdown content will be moved by main and cross axis according to current `placement`	`Array \| Number`	`[ 2, 0 ]`
outline	Removes background.	`Boolean`	`false`
parse	Function that transforms input field text to date, date array or date period	`Function`	-
parse-date	Function that transforms input field text to date	`Function`	-
parse-value	Function that transforms string value to date, date array or date period	`Function`	-
placement	Sets the placement of the dropdown content. More about placements	`String`	`"auto"`
preset	Named preset combination of component props.	`String`	-
prevent-overflow	If true, dropdown will be teleported to target ignoring `overflow: hidden` on relative position elements.	`Boolean`	`false`
range-delimiter	The delimiter used when turning model value to string	`String`	`" ~ "`
readonly	Puts input in readonly state	`Boolean`	`false`
required-mark	Adds required mark to the label	`Boolean`	`false`
reset-on-close	If true, range value will be reset to previous valid value	`Boolean`	`true`
rules	Accepts an array of functions that take an input value as an argument and return either true / false or a string with an error message	`Array`	`[]`
show-other-months	If `true`, other month days will be shown in day picker	`Boolean`	`false`
start-year	First year that user can choose. By default is 1970	`Number`	`1970`
stateful	Add possibility to work with component without setting `v-model`.	`Boolean`	`false`
stick-to-edges	Dropdown will not be rendered outside of viewport. It will be moved in opposite direction.	`Boolean`	`false`
success	Sets input state to success	`Boolean`	`false`
target	Navigation target, More info here.	`String \| Object`	-
teleport	Element where content will be rendered	`String \| Object`	-
text-color	Text color (theme string or HEX string).	`String`	-
trigger	Action that will triggered when open and close dropdown.	`String`	`"click"`
type	This prop will specify which value user should choose	`String`	`"day"`
view	This prop specify which year and month will be shown to user. Also, you can specify type and show year, month or day picker	`Object`	-
weekday-names	Array of 7 weekday names	`Array`	`[ "SU", "MO", "TU", "WE", "TH", "FR", "SA" ]`
weekends	Function that accepts date and return `true` if date is weekend	`Function`	-
weekends-color	Color of the weekend cells (theme string or HEX string).	`String`	-

Name	Description
blur	On blur.
clear	Emitted if select value has been cleared
click-day	The event is triggered when clicked the day cell
click-month	The event is triggered when clicked the month cell
click-year	The event is triggered when clicked the year cell
focus	On focus.
hover-day	The event is triggered when the mouse hover the day cell
hover-month	The event is triggered when the mouse hover the month cell
hover-year	The event is triggered when the mouse hover the year cell
update-error
update-error-messages
update-is-open	The event is triggered when the component needs to toggle the 'is-open'
update-model-value	The event is triggered when the component needs to change the model. Is also used by `v-model`
update-text	The event is triggered when the component needs to change the input text
update-view	The event is triggered when the component needs to change the view

Name	Description
append
appendInner
buttonNext
buttonPrev
day
header
month
prepend
prependInner
weekday
year

Name	Default Value
--va-date-input-min-width	var(--va-form-element-min-width)

Date Input
#

Examples
#

Basic usage
#

Reset on close
#

Reset on close (resetOnClose = true)

Don't reset on close (resetOnClose = false)

IsOpen
#

Input props
#

Formatting
#

Date Manual Input
#

Parsing
#

Advanced formatting
#

View
#

Validation
#

Mode
#

Single mode

Multiple mode

Range mode

API
#

Props #

Events #

Slots #

Css Variables #

Date Input #

Examples #

Basic usage #

Reset on close #

Reset on close (resetOnClose = true)

Don't reset on close (resetOnClose = false)

IsOpen #

Input props #

Formatting #

Date Manual Input #

Parsing #

Advanced formatting #

View #

Validation #

Mode #

Single mode

Multiple mode

Range mode

API #

Props #

Events #

Slots #

Css Variables #

Date Input
#

Examples
#

Basic usage
#

Reset on close
#

IsOpen
#

Input props
#

Formatting
#

Date Manual Input
#

Parsing
#

Advanced formatting
#

View
#

Validation
#

Mode
#

API
#