Date Picker #
Date picker component allows user to select single, multiple or range of dates, months and years. You can customize it the way you want. There is a option to change all string and formats.
It based on native js dates so you can use this Date Picker with any date library you want.
Examples #
Basic usage #
By default, use this component with v-model.
Mode #
You can use date picker in three different ways. By default date picker 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
Stateful #
Date picker can be stateful. Initial value will be undefined, but user can change it.
Single mode
Multiple mode
Range mode
First day of the week #
If you want to always use Monday as the first day of the week, you can set this prop in GlobalConfig.
Sun (default)
Monday
Weekends #
You can highlight weekends using highlight-weekends
prop. Also, you can set your own weekends using weekends
function.
Other month days #
You can show days of other months using show-other-months
prop instead of blank cells in calendar.
Slots #
For now, we don't support localization using one prop. But you have opportunity to localize it by yourself using slots.
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.
Day, 1st month, 2000 year
Month, 2000 year
Year, 2000 year
Type #
If you want allow user to pick only month or year, you can make it using type
prop.
Disable dates #
You can disable some specific days, month or year using allowedDays
, allowedMonth
or allowedYear
props.
Colors #
You can change colors using CSS variables for deeper customization, but also you can simple change colors using props.
Readonly #
Readonly picker for readonly forms.
Disabled #
Disabled picker that can be used in forms.
API #
Props #
Name | Description | Types | Default |
---|---|---|---|
allowedDays |
| - | |
allowedMonths |
| - | |
allowedYears |
| - | |
ariaNextPeriodLabel |
|
| |
ariaPreviousPeriodLabel |
|
| |
ariaSwitchViewLabel |
|
| |
color |
| - | |
disabled |
|
| |
endYear |
|
| |
firstWeekday |
|
| |
firstWeekday | Name of first weekday. Can be |
| |
hideWeekDays |
|
| |
highlightToday |
|
| |
highlightWeekend |
|
| |
mode |
|
| |
mode | Specify if picker value is single date, multiple dates or date range. |
| |
modelValue |
| - | |
modelValue | Date, date array or date period |
| |
monthNames |
|
| |
preset |
| - | |
readonly |
|
| |
showOtherMonths |
|
| |
startYear |
|
| |
stateful |
|
| |
textColor |
| - | |
type |
|
| |
view |
| - | |
weekdayNames |
|
| |
weekends |
| - | |
weekendsColor |
| - |
Events #
Name | Description |
---|---|
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. |
clickDay | The event is triggered when clicked the day cell.. The event argument is:
|
clickMonth | The event is triggered when clicked the month cell.. The event argument is:
|
clickYear | The event is triggered when clicked the year cell.. The event argument is:
|
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. |
hoverDay | The event is triggered when the mouse hover the day cell.. The event argument is:
|
hoverMonth | The event is triggered when the mouse hover the month cell.. The event argument is:
|
hoverYear | The event is triggered when the mouse hover the year cell.. The event argument is:
|
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |
update:view | Emit when DatePicker "view type" is changed. DatePicker view types are |
updateView | Emit when DatePicker "view type" is changed. DatePicker view types are
|
Slots #
Name | Description |
---|---|
buttonNext | Button show next month or year. |
buttonPrev | Button show previous month or year. |
day | Used to change how day will be displayed in picker cell. |
header | This slot is showing year and month between header buttons. |
month | Used to change how month will be displayed in header and picker cell. |
weekday | Used to change how weekday will be displayed in picker cell. |
year | Used to change how year will be displayed in header and picker cell. |
Css Variables #
Name | Default Value |
---|---|
--va-date-picker-font-style | normal |
--va-date-picker-font-weight | 600 |
--va-date-picker-font-size | 12px |
--va-date-picker-line-height | 1.25 |
--va-date-picker-weekday-font-size | 9px |
--va-date-picker-color | var(--va-primary) |
--va-date-picker-text-color | inherit |
--va-date-picker-cell-size | 32px |
--va-date-picker-cell-gap | 2px |
--va-date-picker-cell-radius | 4px |
--va-date-picker-selected-text | var(--va-text-inverted) |
--va-date-picker-selected-background | var(--va-date-picker-color) |
--va-date-picker-today-background | var(--va-date-picker-color) |
--va-date-picker-today-background-opacity | 0.8 |
--va-date-picker-weekends-color | var(--va-danger) |
--va-date-picker-focused-border-color | var(--va-date-picker-color) |
--va-date-picker-cell-opacity | 0.5 |
--va-date-picker-cell-background-opacity-hover | 0.1 |
--va-date-picker-cell-background-opacity-in-range | 0.2 |
--va-date-picker-cell-selected-background-opacity-hover | 0.8 |