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
#

Input props
#

You can pass properties to VaDateInput

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

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.

IsOpen
#

IsOpen prop allows you to force show dropdown as opened.

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

Don't reset on close

API
#

Name	Description	Types	Default
allowedDays	Function that accepts date and return `false` if day is not allowed	`Function`	-
allowedMonths	Function that accepts date and return `false` if month is not allowed	`Function`	-
allowedYears	Function that accepts date and return `false` if year is not allowed	`Function`	-
anchor		`String \| Object`	-
anchorSelector	Anchor CSS selector instead of passing slot	`String`	`""`
ariaLabel	The aria-label of the anchor slot	`String`	`"$t:toggleDropdown"`
ariaNextPeriodLabel	The aria-label of the "next period" button	`String`	`"$t:nextPeriod"`
ariaPreviousPeriodLabel	The aria-label of the "previous period" button	`String`	`"$t:previousPeriod"`
ariaResetLabel	The aria-label of the "reset" button	`String`	`"$t:resetDate"`
ariaSelectedDateLabel	The aria-label of the input of the component if aria-label is not set	`String`	`"$t:selectedDate"`
ariaSwitchViewLabel	The aria-label of the "switch view" button	`String`	`"$t:switchView"`
ariaToggleDropdownLabel	The aria-label of the "toggle dropdown list" button	`String`	`"$t:toggleDropdown"`
autoPlacement	If dropdown doesn't fit viewport, it will be placed automatically to fit viewport	`Boolean`	`true`
background	The color name of the background color	`String`	-
child:middleButton		`Object`	-
child:nextButton		`Object`	-
child:prevButton		`Object`	-
clearable	Adds a button to reset the input field value	`Boolean`	`false`
clearableIcon	Sets the cleaning button icon.	`String`	`"va-clear"`
clearValue	Default input field value	`Date`	-
closeOnAnchorClick	Dropdown will be closed when anchor is clicked	`Boolean`	`true`
closeOnChange		`Boolean`	`null`
closeOnClickOutside	Dropdown will be closed when clicked outside dropdown content and anchor	`Boolean`	`true`
closeOnContentClick	Dropdown will be closed when clicked inside dropdown content	`Boolean`	`false`
closeOnFocusOutside		`Boolean`	`true`
color	Sets input color	`String`	`"primary"`
counter		`Boolean`	-
cursor	Dropdown will be rendered relative to cursor position	`Boolean \| Object`	`false`
delimiter	The delimiter used when turning model value to string	`String`	`", "`
dirty	Sets the dirty state of the component	`Boolean`	`false`
disabled	Disable the input	`Boolean`	`false`
endYear	Last year that user can choose. By default is current year plus 50 years	`Number`	`2074`
error	Sets input state to error	`Boolean`	-
errorCount	Number of error messages displayed	`String \| Number`	`1`
errorMessages	Displays a list of error messages or message if using a string	`Array \| String`	-
firstWeekday	Name of first weekday. Can be `Monday` or `Sunday`	`'Monday' \| 'Sunday'`	`"Sunday"`
format	Function that accepts picker value and should transform it to text for input	`Function`	-
formatDate	Function that accepts picker value and transforms it to the string	`Function`	(d) => d.toLocaleDateString()
formatValue		`Function`	-
hideWeekDays	Hide weekday names on top of day picker	`Boolean`	`false`
highlightToday	If `true` today date will be colored	`Boolean`	`true`
highlightWeekend	If `true` weekend will be colored	`Boolean`	`false`
hoverOutTimeout	Time in `ms` after mouse leave dropdown before it will be closed	`Number`	`200`
hoverOverTimeout	Time in `ms` after mouse enter dropdown before it will be opened	`Number`	`30`
icon	Sets an icon.	`String`	`"va-calendar"`
immediateValidation	Sets the validation to be performed when the component is mounted	`Boolean`	`false`
innerLabel		`Boolean`	`false`
inputAriaDescribedby		`String`	-
inputAriaLabel		`String`	`"$t:inputField"`
inputAriaLabelledby		`String`	-
isContentHoverable	If true, dropdown content will be hoverable	`Boolean`	`true`
isOpen	Value for dropdown. If `true`, then dropdown is shown	`Boolean`	-
keepAnchorWidth	If true, dropdown content will have exact same width as anchor	`Boolean`	`false`
label	Sets input label	`String`	`""`
leftIcon	Sets the icon position to the left.	`Boolean`	`false`
loading	Indicates that something is loading (spinner icon).	`Boolean`	`false`
manualInput	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"`
modelValue	Date, date array or date period	`Date \| Date[] \| { start: Date \| null, end: Date \| null }`	-
monthNames	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 ]`
parse	Function that transforms input field text to date, date array or date period	`Function`	-
parseDate	Function that transforms input field text to date	`Function`	-
placeholder	Sets input placeholder	`String`	`""`
placement	Sets the placement of the dropdown content. More about placements	`String`	`"auto"`
preset	Named preset combination of component props.	`String`	-
rangeDelimiter	The delimiter used when turning model value to string	`String`	`" ~ "`
readonly	Puts input in readonly state	`Boolean`	`false`
requiredMark	Adds required mark to the label	`Boolean`	`false`
resetOnClose	If true, range value will be reset to previous valid value	`Boolean`	`true`
role	Sets the `role` attribute.	`String`	`"button"`
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`	`[]`
showOtherMonths	If `true`, other month days will be shown in day picker	`Boolean`	`false`
startYear	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`
stickToEdges	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`	-
trigger	Action that will triggered when open and close dropdown.	`String \| Array`	`[ "click", "space", "enter", "arrow-down", "arrow-up" ]`
type	This prop will specify which value user should choose	`String`	`"day"`
verticalScrollOnOverflow		`Boolean`	`true`
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`	-
weekdayNames	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`	-
weekendsColor	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:dirty	Fires when the dirty state changes
update:error	Fires when the error state changes
update:errorMessages	Fires when the error messages change
update:isOpen	The event is triggered when the component needs to toggle the 'is-open'
update:modelValue	The event is triggered when the component needs to change the model. Is also used by `v-model` and must be listed after the `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-width	var(--va-form-element-min-width-small)

v1.9.0

now model-value can be ISO8601 string or standard JS Date string (RFC1123) in GTM or Local format
fix: new model-value converts into format provided to model-value instead of Date object
added formatValue prop in case you have null model-value and want to format model-value into specific format
minor: expose valueText, valueDate, validate properties
minor: change dropdown open trigger to enter, click, space and right-click by default

v1.8.0

Date input have outlined style by default
solid and bordered props moved to preset="solid" and preset="bordered"

Date Input
#

Examples
#

Basic usage
#

Input props
#

Parsing
#

Advanced formatting
#

View
#

Validation
#

Mode
#

Single mode

Multiple mode

Range mode

Formatting
#

Date Manual Input
#

IsOpen
#

Reset on close
#

Reset on close

Don't reset on close

API
#

Props #

Events #

Slots #

Css Variables #

Change log #

Date Input #

Examples #

Basic usage #

Input props #

Parsing #

Advanced formatting #

View #

Validation #

Mode #

Single mode

Multiple mode

Range mode

Formatting #

Date Manual Input #

IsOpen #

Reset on close #

Reset on close

Don't reset on close

API #

Props #

Events #

Slots #

Css Variables #

Change log #

Date Input
#

Examples
#

Basic usage
#

Input props
#

Parsing
#

Advanced formatting
#

View
#

Validation
#

Mode
#

Formatting
#

Date Manual Input
#

IsOpen
#

Reset on close
#

API
#