VDateInput 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. | ||
| append-icon | ||
| Creates a v-icon component after default content in the append slot. | ||
| append-inner-icon | ||
| Creates a v-icon component in the append-inner slot. | ||
| autofocus | ||
| Enables autofocus. | ||
| base-color | ||
| Sets the color of the input when it is not focused. | ||
| 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. | ||
| cancel-text | ||
| Text for the cancel button | ||
| center-affix | ||
| Vertically align appendInner, prependInner, clearIcon and label in the center. | ||
| clear-icon | ||
| The icon used when the clearable prop is set to true. | ||
| clearable | ||
| Allows for the component to be cleared. | ||
| 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 . | ||
| counter | ||
| Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation. | ||
| counter-value | ||
| Function returns the counter display text. | ||
| density | ||
| Adjusts the vertical height used by the component. | ||
| direction | ||
| Changes the direction of the input. | ||
| dirty | ||
| Manually apply the dirty state styling. | ||
| disabled | ||
| Removes the ability to click or target the input. | ||
| 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 . | ||
| error | ||
| Puts the input in a manual error state. | ||
| error-messages | ||
| Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation. | ||
| flat | ||
| Removes box shadow when using a variant with elevation. | ||
| focused | ||
| Forces a focused state styling on the component. | ||
| header | ||
| Text shown when no display-date is set. | ||
| height | ||
| Sets the height of the input. | ||
| hide-actions | ||
| MISSING DESCRIPTION (edit in github ) | ||
| hide-details | ||
| Hides hint and validation errors. When set to auto messages will be rendered only if there’s a message (hint, error message, counter value etc) to display. | ||
| hide-header | ||
| Hide the picker header. | ||
| hide-spin-buttons | ||
| Hides spin buttons on the input when type is set to number. | ||
| hide-weekdays | ||
| Hide the days of the week letters. | ||
| hint | ||
| Displays hint text below the input when focused. Force this always open with the persistent-hint property. | ||
| id | ||
| Sets the DOM id on the component. | ||
| label | ||
| Sets the text of the v-label or v-field-label component. | ||
| landscape | ||
| Puts the picker into landscape mode. | ||
| loading | ||
| Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it’s supported by the component) or the primary color. | ||
| location | ||
| Specifies the component’s location. Can combine by using a space separated string. | ||
| max | ||
| Maximum allowed date/month (ISO 8601 format). | ||
| max-errors | ||
| Control the maximum number of shown errors from validation. | ||
| max-height | ||
| Sets the maximum height for the component. | ||
| max-width | ||
| Sets the maximum width for the component. | ||
| messages | ||
| Displays a list of messages or a single message if using a string. | ||
| 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. | ||
| name | ||
| Sets the component’s name attribute. | ||
| next-icon | ||
| Sets the icon for next month/year button. | ||
| ok-text | ||
| Text for the ok button | ||
| persistent-clear | ||
| Always show the clearable icon when the input is dirty (By default it only shows on hover). | ||
| persistent-counter | ||
| Forces counter to always be visible. | ||
| persistent-hint | ||
| Forces hint to always be visible. | ||
| persistent-placeholder | ||
| Forces placeholder to always be visible. | ||
| placeholder | ||
| Sets the input’s placeholder text. | ||
| position | ||
| Sets the position for the component. | ||
| prefix | ||
| Displays prefix text. | ||
| prepend-icon | ||
| Prepends an icon to the outnside the component’s input, uses the same syntax as v-icon. | ||
| prepend-inner-icon | ||
| Creates a v-icon component in the prepend-inner slot. | ||
| prev-icon | ||
| Sets the icon for previous month/year button. | ||
| readonly | ||
| Makes the picker readonly (doesn’t allow to select new date). | ||
| reverse | ||
| Reverses the orientation. | ||
| reverse-transition | ||
| The transition used when changing months into the past | ||
| role | ||
| The role attribute applied to the input. | ||
| rounded | ||
| Adds a border radius to the input. | ||
| rules | ||
| Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string. | ||
| 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. | ||
| single-line | ||
| Label does not move on focus/dirty. | ||
| suffix | ||
| Displays suffix text. | ||
| 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 | ||
| type | ||
| Determines the type of the picker - date for date picker, month for month picker. | ||
| validate-on | ||
| Change what type of event triggers validation to run. | ||
| validation-value | ||
| The value used when applying validation rules. | ||
| variant | ||
| Applies a distinct style to the component. | ||
| 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 | ||
事件
| 名称 | 类型 |
|---|---|
| click:append | |
| Emitted when append icon is clicked. | |
| click:appendInner | |
| Emitted when appended inner icon is clicked. | |
| click:clear | |
| Emitted when clearable icon clicked. | |
| click:prepend | |
| Emitted when prepended icon is clicked. | |
| click:prependInner | |
| Emitted when prepended inner icon is clicked. | |
| update:focused | |
| Emitted when the input is focused or blurred | |
| update:modelValue | |
| Event that is emitted when the component’s model changes. | |
插槽
| default |
| The default Vue slot. |