Alixan UI

Календарь

Readonly input-style календарь с выбором месяца и года, стрелками и быстрыми range-периодами.

Установка

npx alixan-ui-nuxt add calendar

День

<script setup lang="ts">
const date = ref(null)
const { locale } = useI18n()
</script>

<template>
  <Calendar v-model="date" :label="$t('calendarLabels.date')" :locale="locale" date-format="dd.mm.yyyy" />
</template>

Диапазон

<script setup lang="ts">
const range = ref(null)
const { locale } = useI18n()
</script>

<template>
  <Calendar v-model="range" :label="$t('calendarLabels.period')" mode="range" :locale="locale" />
</template>