Range Calendar

Calendário para seleção de um intervalo de datas (data inicial e final).

Uso

<script setup lang="ts">
import { RangeCalendar } from '@halfbyte/maka'
import { ref } from 'vue'

const periodo = ref({ start: '', end: '' })
</script>

<template>
  <RangeCalendar v-model="periodo" />
  <p>De {{ periodo.start }} até {{ periodo.end }}</p>
</template>

Exemplos

<RangeCalendar v-model="periodo" />

<!-- Com limites -->
<RangeCalendar v-model="periodo" min="2024-01-01" max="2024-12-31" />

Props

Prop	Tipo	Padrão
modelValue	DateRange	—
min	string	—
max	string	—
locale	string	"pt-BR"
disabled	boolean	false

DateRange

Campo	Tipo	Descrição
start	string	Data inicial (formato YYYY-MM-DD)
end	string	Data final (formato YYYY-MM-DD)

Events

Evento	Payload	Descrição
update:modelValue	DateRange	Emitido ao selecionar o intervalo