VDatePicker API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| active | ||
| Controls the active state of the item. This is typically used to highlight the component. | ||
| allowed-dates | ||
| Restricts which dates can be selected. | ||
| bg-color | ||
| Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| border | ||
| Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. | ||
| color | ||
| Applies specified color to the control - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| disabled | ||
| Removes the ability to click or target the component. | ||
| display-value | ||
| The value that determines the month to show. This is different from modelValue, which determines the selected value. | ||
| elevation | ||
| Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page . | ||
| header | ||
| Text shown when no display-date is set. | ||
| height | ||
| Sets the height for the component. | ||
| hide-header | ||
| Hide the picker header. | ||
| hide-weekdays | ||
| Hide the days of the week letters. | ||
| landscape | ||
| Puts the picker into landscape mode. | ||
| location | ||
| Specifies the component’s location. Can combine by using a space separated string. | ||
| max | ||
| Maximum allowed date/month (ISO 8601 format). | ||
| max-height | ||
| Sets the maximum height for the component. | ||
| max-width | ||
| Sets the maximum width for the component. | ||
| min | ||
| Minimum allowed date/month (ISO 8601 format). | ||
| min-height | ||
| Sets the minimum height for the component. | ||
| min-width | ||
| Sets the minimum width for the component. | ||
| mode-icon | ||
| Icon displayed next to the current month and year, toggles year selection when clicked. | ||
| model-value | ||
| The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. | ||
| month | ||
| The current month number to show | ||
| multiple | ||
| Allow the selection of multiple dates. The range value selects all dates between two selections. | ||
| next-icon | ||
| Sets the icon for next month/year button. | ||
| position | ||
| Sets the position for the component. | ||
| prev-icon | ||
| Sets the icon for previous month/year button. | ||
| reverse-transition | ||
| The transition used when changing months into the past | ||
| rounded | ||
| Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page . | ||
| show-adjacent-months | ||
| Toggles visibility of days from previous and next months. | ||
| show-week | ||
| Toggles visibility of the week numbers in the body of the calendar. | ||
| tag | ||
| Specify a custom tag used on the root element. | ||
| text | ||
| Specify content text for the component. | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| tile | ||
| Removes any applied border-radius from the component. | ||
| title | ||
| Specify a title text for the component. | ||
| transition | ||
| The transition used when changing months into the future | ||
| view-mode | ||
| Determines which picker in the date or month picker is being displayed. Allowed values: 'month', 'months', 'year'. | ||
| weekdays | ||
| An array of weekdays to display. | ||
| weeks-in-month | ||
| A dynamic number of weeks in a month will grow and shrink depending on how many days are in the month. A static number always shows 7 weeks. | ||
| width | ||
| Width of the picker. | ||
| year | ||
| The current year number to show | ||
事件
| 名称 | 类型 |
|---|---|
| update:modelValue | |
| Event that is emitted when the component’s model changes. | |
| update:month | |
| MISSING DESCRIPTION (edit in github ) | |
| update:viewMode | |
| MISSING DESCRIPTION (edit in github ) | |
| update:year | |
| MISSING DESCRIPTION (edit in github ) | |
插槽
| actions |
| MISSING DESCRIPTION (edit in github ) |
| default |
| The default Vue slot. |
| header |
| MISSING DESCRIPTION (edit in github ) |
| title |
| Slot for the component’s title content. |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $date-picker-header-height | |
| $date-picker-month-btn-height | |
| $date-picker-month-btn-size | |
| $date-picker-month-column-gap | |
| $date-picker-month-day-size | |
| $date-picker-month-font-size | |
| $date-picker-month-padding | |
| $date-picker-months-grid-gap | |
| $date-picker-months-height | |
| $date-picker-show-week-width | |
| $date-picker-width | |
| $date-picker-years-height | |
| $date-picker-years-padding-inline | |