Date Input
#

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

Examples
#

Basic usage
#

Open in GitHub

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)
Open in GitHub

IsOpen
#

IsOpen prop allows you to force show dropdown as opened.

Open in GitHub

Input props
#

You can pass properties to VaDateInput

Open in GitHub

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.

Open in GitHub

Date Manual Input
#

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

Open in GitHub

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.

Open in GitHub

Advanced formatting
#

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

Open in GitHub

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.

Open in GitHub

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.

Open in GitHub

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
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
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

-

Events #

NameDescription

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

Slots #

NameDescription

append

appendInner

buttonNext

buttonPrev

day

header

month

prepend

prependInner

weekday

year

Css Variables #

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