'/%3e%3cpath%20d='M0%2059.6282L80.7353%200.299805L161.471%2059.6282L80.7355%20118.345L0%2059.6282Z'%20fill='%2310B981'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_0_1'%20x1='80.7354'%20y1='39.9999'%20x2='80.7354'%20y2='113.5'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23065F46'/%3e%3cstop%20offset='1'%20stop-color='%2310B981'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e){kind=small}
This component is just a wrapper for the @vuepic/vue-datepicker package to fit the look and feel. For more documentation please see @vuepic/vue-datepicker documentation.
#API
Datepicker
props
Name | Description | Type | Default | Values | Required |
|---|---|---|---|---|---|
size | Control size. One of xs, sm, md, lg, xl. | String | md | ||
disabled | Disables interaction and applies disabled styling. | Boolean | false | ||
loading | Shows a loading indicator and blocks interaction. | Boolean | false | ||
loadingLabel | Accessible label announced while loading. | String | |||
loadingStatus | Loader visual status (for example active or indeterminate). | String | active | ||
modelValue | Passed through to @vuepic/vue-datepicker. | String Date Array Object Number | |||
id | Native id attribute for the input element. | String | |||
name | Native name attribute for form submission. | String | |||
readonly | Makes the field read-only without disabling it. | Boolean | false | ||
required | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
validateOnInput | Runs validation on each input event when true. | Boolean | true | ||
label | Visible label text for the field. | String | |||
helper | Helper text shown below the field. | String | |||
error | External error message; overrides rule errors when set. | String | |||
hideFooter | Hides the footer area (helper / error). | Boolean | false | ||
rules | Validation rule functions or rule descriptors. | Array | () => [] | ||
tooltip | Optional tooltip text next to the label. | String | |||
skipFormRegistry | Skips registering this field with a parent x-form. | Boolean | false | ||
multiCalendars | Passed through to @vuepic/vue-datepicker. | Boolean Number String Object | |||
modelType | Passed through to @vuepic/vue-datepicker. | String | |||
position | Passed through to @vuepic/vue-datepicker. | String | center | ||
dark | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
format | Passed through to @vuepic/vue-datepicker. | String Function | () => null | ||
autoPosition | Passed through to @vuepic/vue-datepicker. | Boolean | true | ||
altPosition | Passed through to @vuepic/vue-datepicker. | Function | |||
transitions | Passed through to @vuepic/vue-datepicker. | Boolean Object | true | ||
formatLocale | Passed through to @vuepic/vue-datepicker. | Object | |||
utc | Passed through to @vuepic/vue-datepicker. | Boolean String | false | ||
ariaLabels | Passed through to @vuepic/vue-datepicker. | Object | () => ({}) | ||
offset | Passed through to @vuepic/vue-datepicker. | Number String | 10 | ||
hideNavigation | Passed through to @vuepic/vue-datepicker. | Array | () => [] | ||
timezone | Passed through to @vuepic/vue-datepicker. | String Object | |||
vertical | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
disableMonthYearSelect | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
disableYearSelect | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
dayClass | Passed through to @vuepic/vue-datepicker. | Function | |||
yearRange | Passed through to @vuepic/vue-datepicker. | Array | () => [1900, 2100] | ||
enableTimePicker | Passed through to @vuepic/vue-datepicker. | Boolean | true | ||
autoApply | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
disabledDates | Passed through to @vuepic/vue-datepicker. | Array Function | () => [] | ||
monthNameFormat | Passed through to @vuepic/vue-datepicker. | String | short | ||
startDate | Passed through to @vuepic/vue-datepicker. | Date String | |||
startTime | Passed through to @vuepic/vue-datepicker. | Object Array | |||
hideOffsetDates | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
noToday | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
disabledWeekDays | Passed through to @vuepic/vue-datepicker. | Array | () => [] | ||
allowedDates | Passed through to @vuepic/vue-datepicker. | Array | |||
nowButtonLabel | Passed through to @vuepic/vue-datepicker. | String | Now | ||
markers | Passed through to @vuepic/vue-datepicker. | Array | () => [] | ||
escClose | Passed through to @vuepic/vue-datepicker. | Boolean | true | ||
spaceConfirm | Passed through to @vuepic/vue-datepicker. | Boolean | true | ||
monthChangeOnArrows | Passed through to @vuepic/vue-datepicker. | Boolean | true | ||
presetDates | Passed through to @vuepic/vue-datepicker. | Array | () => [] | ||
flow | Passed through to @vuepic/vue-datepicker. | Array | () => [] | ||
partialFlow | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
preventMinMaxNavigation | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
reverseYears | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
weekPicker | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
filters | Passed through to @vuepic/vue-datepicker. | Object | () => ({}) | ||
arrowNavigation | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
highlight | Passed through to @vuepic/vue-datepicker. | Function Object | |||
teleport | Passed through to @vuepic/vue-datepicker. | String Boolean Object | |||
teleportCenter | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
locale | Passed through to @vuepic/vue-datepicker. | String | en-Us | ||
weekNumName | Passed through to @vuepic/vue-datepicker. | String | W | ||
weekStart | Passed through to @vuepic/vue-datepicker. | Number String | 1 | ||
weekNumbers | Passed through to @vuepic/vue-datepicker. | String Function Object | |||
monthChangeOnScroll | Passed through to @vuepic/vue-datepicker. | Boolean String | true | ||
dayNames | Passed through to @vuepic/vue-datepicker. | Function Array | |||
monthPicker | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
customProps | Passed through to @vuepic/vue-datepicker. | Object | |||
yearPicker | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
modelAuto | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
selectText | Passed through to @vuepic/vue-datepicker. | String | Select | ||
cancelText | Passed through to @vuepic/vue-datepicker. | String | Cancel | ||
previewFormat | Passed through to @vuepic/vue-datepicker. | String Function | () => "" | ||
multiDates | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
ignoreTimeValidation | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
minDate | Passed through to @vuepic/vue-datepicker. | Date String | |||
maxDate | Passed through to @vuepic/vue-datepicker. | Date String | |||
minTime | Passed through to @vuepic/vue-datepicker. | Object | |||
maxTime | Passed through to @vuepic/vue-datepicker. | Object | |||
placeholder | Passed through to @vuepic/vue-datepicker. | String | |||
hideInputIcon | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
clearable | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
alwaysClearable | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
state | Passed through to @vuepic/vue-datepicker. | Boolean | |||
autocomplete | Passed through to @vuepic/vue-datepicker. | String | off | ||
timePicker | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
enableSeconds | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
is24 | Passed through to @vuepic/vue-datepicker. | Boolean | true | ||
noHoursOverlay | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
noMinutesOverlay | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
noSecondsOverlay | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
hoursGridIncrement | Passed through to @vuepic/vue-datepicker. | String Number | 1 | ||
minutesGridIncrement | Passed through to @vuepic/vue-datepicker. | String Number | 5 | ||
secondsGridIncrement | Passed through to @vuepic/vue-datepicker. | String Number | 5 | ||
hoursIncrement | Passed through to @vuepic/vue-datepicker. | Number String | 1 | ||
minutesIncrement | Passed through to @vuepic/vue-datepicker. | Number String | 1 | ||
secondsIncrement | Passed through to @vuepic/vue-datepicker. | Number String | 1 | ||
range | Passed through to @vuepic/vue-datepicker. | Boolean Object | false | ||
uid | Passed through to @vuepic/vue-datepicker. | String | |||
inline | Passed through to @vuepic/vue-datepicker. | Boolean Object | false | ||
textInput | Passed through to @vuepic/vue-datepicker. | Boolean Object | false | ||
noDisabledRange | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
sixWeeks | Passed through to @vuepic/vue-datepicker. | Boolean String | false | ||
actionRow | Passed through to @vuepic/vue-datepicker. | Object | () => ({}) | ||
focusStartDate | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
disabledTimes | Passed through to @vuepic/vue-datepicker. | Function Array | |||
showLastInRange | Passed through to @vuepic/vue-datepicker. | Boolean | true | ||
timePickerInline | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
calendar | Passed through to @vuepic/vue-datepicker. | Function | |||
config | Passed through to @vuepic/vue-datepicker. | Object | |||
quarterPicker | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
yearFirst | Passed through to @vuepic/vue-datepicker. | Boolean | false | ||
onInternalModelChange | Passed through to @vuepic/vue-datepicker. | Function Object | |||
enableMinutes | Passed through to @vuepic/vue-datepicker. | Boolean | true | ||
ui | Passed through to @vuepic/vue-datepicker. | Object | () => ({}) |
slots
Name | Description |
|---|---|
dp-input | Custom input trigger; receives value, onEnter, and onTab from vue-datepicker. |
emits
Name | Description |
|---|---|
update:modelValue | Emitted when the bound value changes (v-model). |
blur | Emitted when the field loses focus. |
focus | Emitted when the field receives focus. |
input | Emitted on native input events. |
change | Emitted when the value is committed (change). |
methods
Name | Description |
|---|---|
focus | Focus the datepicker input. |
blur | Remove focus from the datepicker input. |
validate | Run validation on the underlying input. |