UtilsDate

Данный компонент выводит поле для выбора даты.

WARNING

Для работы данного компонента нужно включить компонент в build.transpile в nuxt.config

export default defineNuxtConfig({
  build: {
    transpile: ['@vuepic/vue-datepicker']
  }
})

Компонент может быть использован несколькими способами:

1. Можно использовать в форме с помощью formData. Для этого в компоненте предусмотрен пропс id
2. Можно использовать через v-model.

Пропсы

• id — идентификатор поля ввода. Устанавливает id и name, которые используются в formData.

  По умолчанию: date.

• label — заголовок для поля. Задает параметр label.

• placeholder — плейсхолдер для поля. Задает параметр placeholder.

  По умолчанию: Выберите дату.

• disabled — является ли поле выключенным. Задает параметр disabled.

• required — является ли поле обязательным для заполнения. Выставляет атрибут required.

  По умолчанию: true.

• format — формат отображение даты. Выставляет атрибут format.

  По умолчанию: dd.MM.yyyy.

Помимо этого можно использовать любые props из документации https://vue3datepicker.com/

Стилизация

Для стилизации компонента подготовлены классы:

• utils-date-container. Его стилизация влияет на контейнер, в котором находится текстовое поле.
• utils-date-label. Его стилизация влияет на label.
• utils-date-picker. Его стилизация влияет на контейнер для input.
• utils-date-input. Его стилизация влияет на input.

INFO

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

• utils-form-container. Его стилизация влияет на контейнер, в котором находится текстовое поле.
• utils-form-label. Его стилизация влияет на label.
• utils-form-input. Его стилизация влияет на поле ввода.

Использование

<script setup lang="ts">
const date = ref("")
</script>

<template>
  <UtilsDate
    v-model="date"
  />
</template>