Vuetify

Магазин

Для бизнеса

The v-date-picker is stand-alone component that can be utilized in many existing Vuetify components. It offers the user a visual representation for selecting date/month.

Date pickers come in two orientation variations, portrait (default) and landscape. By default they are emitting input event when the day (for date picker) or month (for month picker), but with reactive prop they can update the model even after clicking year/month.

Выберите нужный компонент ниже и посмотрите доступные параметры, слоты, события и функции.

Ниже приведена коллекция простых и сложных примеров.

Цвета выбора даты можно установить с помощью свойств color и header-color. Если header-color не указан, заголовок будет использовать значение color .

Вы можете указать допустимые даты с использованием массивов, объектов и функций.

Вы можете указать допустимую ширину picker или сделать её на всю ширину.

Вы можете наблюдать за pickerDate, который является отображаемым месяцем/годом (в зависимости от типа выбора и активного вида), чтобы выполнять некоторые действия, когда он изменяется.

Выбор даты поддерживает интернационализацию через объект JavaScript Date. Укажите тег языка BCP 47, используя locale, а затем установите первый день недели с помощью first-day-of-week .

Вы можете переопределить иконки по умолчанию, используемые в сборщике.

Выбор новой даты может быть отключён путём добавления readonly prop.

By default the current date is displayed using outlined button - show-current prop allows you to remove the border or select different date to be displayed as the current one.

Выбор месяца имеет два варианта ориентации: портретная (по умолчанию) и альбомная.

Цвета Выбора месяца можно установить с помощью color и header-color props. Если header-color prop не указан, заголовок будет использовать значение color.

Вы можете указать допустимые месяцы, используя массивы, объекты и функции.

Month pickers can now select multiple months with the multiple prop. If using multiple then the month picker expects its model to be an array.

Вы можете указать допустимую ширину picker или сделать её на всю ширину.

Выбор даты поддерживает интернационализацию через объект JavaScript Date. Укажите тег языка BCP 47, используя locale, а затем установите первый день недели с помощью first-day-of-week .

Вы можете переопределить иконки по умолчанию, используемые в сборщике.

Выбор новой даты может быть отключён путём добавления readonly prop.

By default the current month is displayed using outlined button - show-current prop allows you to remove the border or select different month to be displayed as the current one.

When integrating a picker into a v-text-field, it is recommended to use the readonly prop. This will prevent mobile keyboards from triggering. To save vertical space, you can also hide the picker title.

Pickers expose a slot that allow you to hook into save and cancel functionality. This will maintain an old value which can be replaced if the user cancels.

If you need to display date in the custom format (different than YYYY-MM-DD) you need to use the formatting function.

Formatting dates is possible also with external libs such as Moment.js or date-fns

Date picker can now select multiple dates with the multiple prop. If using multiple then date picker expects its model to be an array.

Date picker can select date range with the range prop. When using range prop date picker expects its model to be an array of length 2 or empty.

Начиная с выбора года по умолчанию, ограничивая диапазон дат и закрывая меню выбора после выбора дня, сделайте идеальный выбор день рождения.

Вы можете указать события, используя массивы, объекты и функции. Чтобы изменить цвет по умолчанию для события, используйте event-color prop.

When integrating a picker into a v-text-field, it is recommended to use the readonly prop. This will prevent mobile keyboards from triggering. To save vertical space, you can also hide the picker title.

Pickers expose a slot that allow you to hook into save and cancel functionality. This will maintain an old value which can be replaced if the user cancels.

Готовы к большему? Продолжить чтение с:

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!