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