Configuration ​

Props ​

v-model ​

• Type: Date
• Required: yes

The actual date that will be selected. The component behaves as close to Vue 3 documentation on custom component inputs as possible, using modelValue prop and update:modelValue event pair. Use those if you want to have more control over your model binding.

upperLimit ​

• Type: Date
• Required: no

Upper limit (not inclusive) for available dates for picking. All dates above that limit will not be selectable.

lowerLimit ​

• Type: Date
• Required: no

Lower limit (not inclusive) for available dates for picking. All dates below that limit will not be selectable.

startingViewDate ​

• Type: Date
• Default: new Date() (right now)

When opening the empty datepicker, this date will be "focused": the month of this date will be shown on the day picker view, the year of this date will be shown in the month picker view, and the decade of this date will be shown in the year picker view.

disabledDates ​

• Type: { dates: Date[], predicate: (target: Date) => boolean }
• Required: no

All dates listed in the dates array will not be selectable. Can also take in a function via the predicate key, which tests each date in the current view of the calendar, returning true if date should be disabled.

disabledTime ​

• Type: { dates: Date[], predicate: (target: Date) => boolean }
• Required: no

All dates listed in the dates array will not be selectable in the timepicker view. Can also take in a function via the predicate key, which tests each date in the timepicker view, returning true if date should be disabled.

startingView ​

• Type: 'time' | 'day' | 'month' | 'year'
• Default: 'day'

View on which the date picker should open. Can be either year, month, day or time. If startingView is time and minimumView is time then only view of the calendar time will be available.

dayPickerHeadingFormat ​

• Type: String (date-fns format string)
• Default: LLLL yyyy

date-fns-type formatting for a day view heading. By default prints full month as text and selected year (e.g. January 2021).

weekdayFormat ​

• Type: String (date-fns format string)
• Default: EE

date-fns-type formatting for a line of weekdays on day view. By default uses three-letter representation (e.g. Fri).

dayFormat ​

• Type: String (date-fns format string)
• Default: dd

date-fns-type formatting for the day picker view.

inputFormat ​

• Type: String (date-fns format string)
• Default: yyyy-MM-dd

date-fns-type format in which the string in the input should be both parsed and displayed. By default uses ISO format (e.g. 2021-01-01).

locale ​

• Type: Locale date-fns locale object
• Default: date-fns/locale/en

Used in all date string formatting (e.g. see default dayPickerHeadingFormat)

weekStartsOn ​

• Type: 0 | 1 | 2 | 3 | 4 | 5 | 6
• Default: 1

Day on which the week should start. Number from 0 to 6, where 0 is Sunday and 6 is Saturday. Week starts with a Monday (1) by default.

clearable ​

• Type: Boolean
• Default: false

Allows clearing the selected date and setting the value to null

disabled ​

• Type: Boolean
• Default: false

Disables datepicker and prevents it's opening

typeable ​

• Type: Boolean
• Default: false

Allows user to input date manually

allowOutsideInterval ​

• Type: Boolean
• Default: false

Allows user to click dates outside of current interval.

Styling ​

The input itself can be styled via passing classes to it. Attribute fallthrough is enabled. Keep in mind that input itself is not a top-level element, as it is contained within the top-level div.

Variables ​

Style can be altered significantly without editing CSS files of the components. This is done via CSS variables. Following variables are available:

Styling example and playground ​

{
  "--vdp-bg-color": "#ffffff",
  "--vdp-text-color": "#000000",
  "--vdp-box-shadow": "0 4px 10px 0 rgba(128, 144, 160, 0.1), 0 0 1px 0 rgba(128, 144, 160, 0.81)",
  "--vdp-border-radius": "3px",
  "--vdp-heading-size": "2.5em",
  "--vdp-heading-weight": "bold",
  "--vdp-heading-hover-color": "#eeeeee",
  "--vdp-arrow-color": "currentColor",
  "--vdp-elem-color": "currentColor",
  "--vdp-disabled-color": "#d5d9e0",
  "--vdp-hover-color": "#ffffff",
  "--vdp-hover-bg-color": "#0baf74",
  "--vdp-selected-color": "#ffffff",
  "--vdp-selected-bg-color": "#0baf74",
  "--vdp-current-date-outline-color": "#888888",
  "--vdp-current-date-font-weight": "bold",
  "--vdp-elem-font-size": "0.8em",
  "--vdp-elem-border-radius": "3px",
  "--vdp-divider-color": "#d5d9e0"
}