vue3-t-datepicker - Datepicker для VUE3

Простой и гибкий Datepicker компонент для VUE3.

Возможности

1. Выбор одного дня
2. Выбор промежутка
3. Выбор дня или выбор месяца
4. Возможно указать формат для вывода в инпут (например dd.MM.yyyy)
5. Возможно указать формат для возвращаемых данных (например dd.MM.yyyy)
6. Минимальная и максимальная возможные даты
7. Возможность сделать неактивным
8. Возможность указать максимальную ширину дропдауна с календарем
9. Вкл/Выкл иконки
10. Настройка закрытия при выборе даты

Установка

npm i vue3-t-datepicker

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

1. Импортируйте стили и компонент в main.ts (.js)

import { createApp } from 'vue'
import App from './App.vue'

import TDatepicker from 'vue3-t-datepicker'; // Импортируйте компонент
import "vue3-t-datepicker/dist/vue3-t-datepicker.css" // Импортируйте стили

const app = createApp(App);

app.component('TDatepicker', TDatepicker);

app.mount('#app');

2. Используйте компонент там, где необходимо:

<script setup lang="ts">
  import { defineModel } from '@vue/runtime-core'
  const model = defineModel();
</script>
<template>
  <TDatepicker v-model="model"/>
</template>

Props

| Prop | Required | Description | Default | |-----------------|----------|-----------------------------------------------------|-------------| | v-model | + | Модель | | | textInputFormat | - | Формат вывода даты в поле ввода | dd.MM.yyyy | | outputFormat | - | Формат возвращаемых данных | dd.MM.yyyy | | min | - | Минимальная дата (должна соответствовать формату) | undefined | | max | - | Максимальная дата (должна соответствовать формату) | undefined | | pickerType | - | Режим выбора: day - выбор дня, month - выбор месяца | day | | range | - | Режим выбора промежутка | false | | disabled | - | Отключить datepicker | false | | maxWidth | - | Максимальная ширина дропдауна с календарем | undefined | | clearable | - | Отобразить кнопку очистки | false | | showIcon | - | Отобразить иконку календаря | false | | closeOnSelect | - | Закрывать автоматически при выборе даты | false |