DatePicker

Day to change, day to stick to the habits.

Example

Props

🕹️ standard props
selectedYear
number
The currently selected year.
new Date().getFullYear()
selectedMonth
number
The currently selected month.
new Date().getMonth()
type
'singleDate' | 'dateRange'
Choose either a single date or a date range.
singleDate
selectedDate
Date
The currently selected date.
undefined
selectedDateTo
Date
The currently selected date to for date ranges.
undefined
visibleMonth
number
The currently visible month in the calendar.
selectedMonth
visibleYear
number
The currently visible year in the calendar.
selectedYear
view
'year' | 'month' | 'day'
The current view mode of the date picker.
'day'
locale
Locale
The locale used for month names and date formatting.
'it'
selectableYears
number[]
The years that can be selected in the year view.
[...Array(150).keys()].map((i) => i + (new Date().getFullYear() - 75))
skipTabs
boolean
Whether to skip tab navigation.
false
disabled
boolean
Whether the date picker is disabled.
false
class
{ container?: string, header?: string, selectorRow?: string }
Custom CSS class names for the date picker container, header, and selector row.
undefined
🎨 style props
--date-picker-height
size
The height of the date picker.
400px
--date-picker-width
size
The width of the date picker.
100%
--date-picker-header-background-color
color
The background color of the date picker header.
rgb(var(--global-color-primary-600))
--date-picker-header-color
color
The text color of the date picker header.
rgb(var(--global-color-grey-50))
--date-picker-box-shadow
shadow
The box shadow of the date picker.
0 4px 6px -1px rgb(var(--global-color-contrast-300), .1), 0 2px 4px -2px rgb(var(--global-color-contrast-300), .1)
--date-picker-overflow
visibility
The overflow behavior of the date picker.
hidden

Slots

No data available

Events

onyearClick

Triggered when a year is clicked.

Attribute	Type	Description
year	number	The selected year

onmonthClick

Triggered when a month is clicked.

Attribute	Type	Description
month	number	The selected month

ondayClick

Triggered when a day is clicked.

Attribute	Type	Description
dateStat	DateStat	The date statistics for the selected day
selected	boolean	Indicates if the day is selected
extraMonth	boolean	Indicates if the day is from an extra month