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
allowedDays		`Function`	-
allowedMonths		`Function`	-
allowedYears		`Function`	-
anchorSelector		`String`	`""`
ariaLabel		`String`	`"$t:toggleDropdown"`
ariaNextPeriodLabel		`String`	`"$t:nextPeriod"`
ariaPreviousPeriodLabel		`String`	`"$t:previousPeriod"`
ariaResetLabel		`String`	`"$t:resetDate"`
ariaSelectedDateLabel		`String`	`"$t:selectedDate"`
ariaSwitchViewLabel		`String`	`"$t:switchView"`
ariaToggleDropdownLabel		`String`	`"$t:toggleDropdown"`
autoPlacement		`Boolean`	`true`
background		`String`	`"background-element"`
bordered		`Boolean`	`false`
clearable		`Boolean`	`false`
clearableIcon		`String`	`"va-clear"`
clearValue		`Date`	-
closeOnAnchorClick		`Boolean`	`true`
closeOnClickOutside		`Boolean`	`true`
closeOnContentClick		`Boolean`	`false`
color		`String`	`"primary"`
cursor		`Boolean`	`false`
delimiter		`String`	`", "`
disabled		`Boolean`	`false`
endYear		`Number`	`2073`
error		`Boolean`	-
errorCount		`String \| Number`	`1`
errorMessages		`Array \| String`	-
firstWeekday		`String`	`"Sunday"`
firstWeekday	Name of first weekday. Can be `Monday` or `Sunday`	`'Monday' \| 'Sunday'`
format		`Function`	-
formatDate		`Function`	(d) => d.toLocaleDateString()
hideWeekDays		`Boolean`	`false`
highlightToday		`Boolean`	`true`
highlightWeekend		`Boolean`	`false`
hoverOutTimeout		`Number`	`200`
hoverOverTimeout		`Number`	`30`
icon		`String`	`"va-calendar"`
immediateValidation		`Boolean`	`false`
isContentHoverable		`Boolean`	`true`
isOpen		`Boolean`	-
keepAnchorWidth		`Boolean`	`false`
label		`String`	`""`
leftIcon		`Boolean`	`false`
loading		`Boolean`	`false`
manualInput		`Boolean`	`false`
messages		`Array \| String`	`[]`
mode		`String`	`"auto"`
mode	Specify if picker value is single date, multiple dates or date range.	`'single' \| 'multiple' \| 'range'`
modelValue		`Date \| Array \| Object \| String \| Number`	-
modelValue	Date, date array or date period	`Date \| Date[] \| { start: Date \| null, end: Date \| null }`
monthNames		`Array`	`[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]`
name		`String`	-
offset		`Array \| Number`	`[ 2, 0 ]`
outline		`Boolean`	`false`
parse		`Function`	-
parseDate		`Function`	-
parseValue		`Function`	-
placement		`String`	`"auto"`
preset		`String`	-
preventOverflow		`Boolean`	`false`
rangeDelimiter		`String`	`" ~ "`
readonly		`Boolean`	`false`
requiredMark		`Boolean`	`false`
resetOnClose		`Boolean`	`true`
rules		`Array`	`[]`
showOtherMonths		`Boolean`	`false`
startYear		`Number`	`1970`
stateful		`Boolean`	`false`
stickToEdges		`Boolean`	`false`
success		`Boolean`	`false`
target		`String \| Object`	-
teleport		`String \| Object`	-
textColor		`String`	-
trigger		`String`	`"click"`
type		`String`	`"day"`
view		`Object`	-
weekdayNames		`Array`	`[ "SU", "MO", "TU", "WE", "TH", "FR", "SA" ]`
weekends		`Function`	-
weekendsColor		`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:errorMessages
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`
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
#