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 #
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 #
Props #
Name | Description | Types | Default |
---|---|---|---|
allowedDays |
| - | |
allowedMonths |
| - | |
allowedYears |
| - | |
anchorSelector |
|
| |
ariaLabel |
|
| |
ariaNextPeriodLabel |
|
| |
ariaPreviousPeriodLabel |
|
| |
ariaResetLabel |
|
| |
ariaSelectedDateLabel |
|
| |
ariaSwitchViewLabel |
|
| |
ariaToggleDropdownLabel |
|
| |
autoPlacement |
|
| |
background |
|
| |
bordered |
|
| |
clearable |
|
| |
clearableIcon |
|
| |
clearValue |
| - | |
closeOnAnchorClick |
|
| |
closeOnClickOutside |
|
| |
closeOnContentClick |
|
| |
color |
|
| |
cursor |
|
| |
delimiter |
|
| |
disabled |
|
| |
endYear |
|
| |
error |
| - | |
errorCount |
|
| |
errorMessages |
| - | |
firstWeekday |
|
| |
firstWeekday | Name of first weekday. Can be |
| |
format |
| - | |
formatDate |
| (d) => d.toLocaleDateString() | |
hideWeekDays |
|
| |
highlightToday |
|
| |
highlightWeekend |
|
| |
hoverOutTimeout |
|
| |
hoverOverTimeout |
|
| |
icon |
|
| |
immediateValidation |
|
| |
isContentHoverable |
|
| |
isOpen |
| - | |
keepAnchorWidth |
|
| |
label |
|
| |
leftIcon |
|
| |
loading |
|
| |
manualInput |
|
| |
messages |
|
| |
mode |
|
| |
mode | Specify if picker value is single date, multiple dates or date range. |
| |
modelValue |
| - | |
modelValue | Date, date array or date period |
| |
monthNames |
|
| |
name |
| - | |
offset |
|
| |
outline |
|
| |
parse |
| - | |
parseDate |
| - | |
parseValue |
| - | |
placement |
|
| |
preset |
| - | |
preventOverflow |
|
| |
rangeDelimiter |
|
| |
readonly |
|
| |
requiredMark |
|
| |
resetOnClose |
|
| |
rules |
|
| |
showOtherMonths |
|
| |
startYear |
|
| |
stateful |
|
| |
stickToEdges |
|
| |
success |
|
| |
target |
| - | |
teleport |
| - | |
textColor |
| - | |
trigger |
|
| |
type |
|
| |
view |
| - | |
weekdayNames |
|
| |
weekends |
| - | |
weekendsColor |
| - |
Events #
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 |
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 #
Name | Description |
---|---|
append | |
appendInner | |
buttonNext | |
buttonPrev | |
day | |
header | |
month | |
prepend | |
prependInner | |
weekday | |
year |
Css Variables #
Name | Default Value |
---|---|
--va-date-input-min-width | var(--va-form-element-min-width) |