<template>
<w-stack direction="column" gap="medium">
<w-datepicker
label="Appointment date"
/>
</w-stack>
</template>
|
Name |
Description |
Type |
Default |
Values |
|---|---|---|---|---|
|
dates-disabled |
Controls which dates are blocked from being selected. |
Object |
null |
{ before: Date, after: Date, dates: Array<Date>, ranges: Array<{ from: Date, to: Date }> } |
|
dates-highlighted |
Controls which dates are highlighted. |
Object |
null |
{ before: Date, after: Date, dates: Array<Date>, ranges: Array<{ from: Date, to: Date }> } |
|
error |
Shows up to two initials in th Optional error message to be shown under the date picker field. e avatar. |
String, Boolean |
null |
|
|
first-day-of-week |
Sets the first day of the week for different countries. 0 is Sunday and 1 is Monday. |
Number |
0 |
0, 1, 2, 3, 4, 5, 6 |
|
formatter |
The formatter function which accepts a Date and returns a string. By default it uses the ISO-8601 format. |
Function |
date => new Intl.DateTimeFormat('default').format(date) |
|
|
highlight-current-week |
Highlights the current week based on the current date. |
Boolean |
false |
false, true |
|
hint |
Optional text about the expected date picker. |
String |
null |
|
|
label |
The label for the date picker field. If we are in multi calendar, we pass an object and it should have the following structure: { from: string, to: string, } |
String, Object |
null |
|
|
locale |
The locale to use for the date picker. |
String |
'default' |
default, de-DE, en-GB, en-US, es-CO, es-MX, es-ES, es-US, it-IT, pl-PL, pt-BR, pt-PT, tr-TR |
|
model-value |
The selected date(s) of the date picker. |
Array |
null |
Array<Date> |
|
open |
Controls whether the dropdown is open or not. |
Boolean |
false |
false, true |
|
parser |
The parser function which accepts a string and returns a Date. By default it uses the ISO-8601 format. |
Function |
|
|
|
placeholder |
Placeholder text to display within the date picker field. |
String |
null |
|
|
readonly |
Set the datepicker input to a readonly state. It remains focusable and will be submitted in forms, but cannot be edited. |
Boolean |
false |
false, true |
|
required |
Determines whether the date picker is required or not. |
Boolean |
false |
false, true |
|
target |
Type string or an actual DOM node where you want render component |
Strong, Object |
'body' |
|
|
translations |
Object with all necessary translations. |
Object |
{ triggerIconCalendar: 'Date picker', triggerIconToggle: 'Toggle', month: 'Month', year: 'Year', previousMonth: 'Previous month', nextMonth: 'Next month',} |
{ triggerIconCalendar: string, triggerIconToggle: string, month: string, year: string, previousMonth: string, nextMonth: string} |
|
use-teleport |
When it is set to true, date picker menu will teleport the content part into the target. |
Boolean |
false |
false, true |
|
variant |
Controls whether the date picker is multi month or not. |
String |
'single' |
'single', 'range' |
Note: “datesDisabled” allows the range of years to change to the feature's own needs.
Events
|
Name |
Description |
Type |
|---|---|---|
|
select |
Emits the selected date(s). If the datepicker is single, it will emit an array with one date. If the datepicker is in range, it will emit an array with two dates. |
{ "names": [ "Array<Date>" ] } |
|
update:modelValue |
Emits the selected date(s). If the datepicker is single, it will emit an array with one date. If the datepicker is in range, it will emit an array with two dates. |
{ "names": [ "Array<Date>" ] } |
Slots
|
Name |
Description |
|---|---|
|
hint |
Use it to provide rich content for input hint. Takes precedence over hint property. |