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
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

-

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: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

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)