The component offers an intuitive way for users to select dates from a calendar, users can easily navigate through months and years to pick specific dates.
Explore the available props for the date picker component
Property
Description
Type
Default
landscape
specifies the orientation of the component
boolean
false
color
Applies specified color to the component - supports only utility colors (for example primary or secondary)
string
primary
no-title
hide or show the header
boolean
false
only-year
changes the behavior of the component to one of year selection
boolean
false
only-month
changes the behavior of the component to one of month selection
boolean
false
close-on-change
If the component is used within a dialog or menu, this property can be used to indicate that it automatically closes the window as soon as a date is selected.
boolean
false
model-value
The v-model value of the component.
Date|string
undefined
week-start
day on which you want the week to start
number {0...6}
0
lng
component language
en | es
'en'
icon-prev
Sets the icon for previous month/year button.
Array<IconPath> IconPath string
-
icon-next
Sets the icon for next month/year button.
Array<IconPath> IconPath string
-
disabled
is used to disable the desired dates using the DatesConfiguration interface
DatesConfiguration
{}
highlighted
is used to highlight the desired dates using the DatesConfiguration interface
DatesConfiguration
{}
view
specifies the initial mode of the calendar: day month or year
datePickerViewType
day -> 0
Events
Name
Type
update:modelValue
Date | string
update:view
datePickerViewType
click:day
Day
Slots
title
Slot for the component’s title content.
header
Slot for the component’s header content.
data types
You can import all data types used in the component from the path: drocket