Vitral 0.2
Formulário

DatePicker

Um campo de data em que se pode digitar ou escolher num calendário, lido no formato do locale.

Testado com WAI-ARIA

Importação

main.ts
import { DatePicker } from '@vitral/vue';

Básico

Format from the locale · value: null
<script setup lang="ts">import { DatePicker, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const today = new Date();const start = new Date(today.getFullYear(), today.getMonth(), today.getDate());const plus = (days: number) => new Date(start.getFullYear(), start.getMonth(), start.getDate() + days); const date = ref<Date | null>(null);const iso = ref<Date | null>(plus(3)); const shown = (value: Date | null) => (value ? value.toDateString() : 'null');</script> <template>    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="dp-basic">Date</Label>            <DatePicker id="dp-basic" v-model="date" placeholder="Pick a date" aria-describedby="dp-basic-hint" />            <small id="dp-basic-hint" style="color: var(--vt-text-muted-color)">Format from the locale · value: {{ shown(date) }}</small>        </StackPanel>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="dp-iso">ISO format, weeks from Monday</Label>            <DatePicker id="dp-iso" v-model="iso" date-format="yyyy-MM-dd" :first-day-of-week="1" />        </StackPanel>    </StackPanel></template>

Restrições

Só os próximos 30 dias, sem fins de semana, e dois dias bloqueados. Os dias não selecionáveis são pulados pelas teclas e não podem ser clicados nem digitados.

<script setup lang="ts">import { DatePicker, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const today = new Date();const start = new Date(today.getFullYear(), today.getMonth(), today.getDate());const plus = (days: number) => new Date(start.getFullYear(), start.getMonth(), start.getDate() + days); const booking = ref<Date | null>(null);const holidays = [plus(4), plus(5)];</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="dp-booking">Delivery</Label>        <DatePicker id="dp-booking" v-model="booking" :min-date="start" :max-date="plus(30)" :disabled-days="[0, 6]" :disabled-dates="holidays" placeholder="Choose a weekday" />    </StackPanel></template>

Inline

O calendário sozinho, sem o campo.

Pick-up day
setembro 2026
DSTQQSS
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910
Value: Sun Sep 27 2026
Disabled
setembro 2026
DSTQQSS
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910
<script setup lang="ts">import { DatePicker, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const today = new Date();const start = new Date(today.getFullYear(), today.getMonth(), today.getDate());const plus = (days: number) => new Date(start.getFullYear(), start.getMonth(), start.getDate() + days); const inline = ref<Date | null>(plus(2));</script> <template>    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <span id="dp-inline-label">Pick-up day</span>            <DatePicker v-model="inline" inline show-today-button show-clear-button aria-labelledby="dp-inline-label" />            <small style="color: var(--vt-text-muted-color)">Value: {{ inline ? inline.toDateString() : 'null' }}</small>        </StackPanel>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <span id="dp-inline-disabled">Disabled</span>            <DatePicker :model-value="plus(1)" inline disabled aria-labelledby="dp-inline-disabled" />        </StackPanel>    </StackPanel></template>

Tamanhos, variantes e estados

<script setup lang="ts">import { DatePicker } from '@vitral/vue'; const today = new Date();const start = new Date(today.getFullYear(), today.getMonth(), today.getDate());</script> <template>    <DatePicker size="small" placeholder="Small" aria-label="Small" />    <DatePicker placeholder="Normal" aria-label="Normal" />    <DatePicker size="large" placeholder="Large" aria-label="Large" />    <DatePicker variant="filled" placeholder="Filled" aria-label="Filled" />    <DatePicker invalid placeholder="Invalid" aria-label="Invalid" />    <DatePicker :model-value="start" disabled aria-label="Disabled" />    <DatePicker :model-value="start" readonly aria-label="Read only" /></template>

Fluido

<script setup lang="ts">import { DatePicker } from '@vitral/vue';</script> <template>    <DatePicker fluid placeholder="Fills its container" aria-label="Fluid" /></template>

API

Lido de packages/vue/src/components/DatePicker/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
dateFormatstringUm padrão de `formatDate` (`yyyy yy MMMM MMM MM M dd d`); o padrão é o `dateFormat` do locale.
minDateDate | nullO primeiro dia selecionável.
maxDateDate | nullO último dia selecionável.
disabledDatesDate[]Dias que não podem ser escolhidos.
disabledDaysnumber[]Dias da semana que não podem ser escolhidos, 0 = domingo.
showTodayButtonbooleanUm botão no rodapé que seleciona hoje.
showClearButtonbooleanUm botão no rodapé que esvazia o valor.
firstDayOfWeeknumber0 = domingo; o padrão é o `firstDayOfWeek` do locale.
placeholderstring—
inlinebooleanMostra o calendário no lugar, sem caixa de texto nem popup.
sizeSize—
variantInputVariantO padrão é o `inputVariant` do plugin.
invalidboolean—
disabledboolean—
readonlyboolean—
fluidboolean—
placementOverlayPlacement—
appendTostring`'body'` (o padrão), `'self'` para renderizar no lugar, ou um seletor.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
dateSelectdate: DateUm dia foi escolhido no calendário, ou digitado e confirmado.
clear——
show——
hide——
monthChangeevent: DatePickerMonthChangeEvent—
focusevent: FocusEvent—
blurevent: FocusEvent—

Slots

NomeProps do slotDescrição
date(props: DatePickerDateSlotProps)O conteúdo da célula de um dia.
footer—Conteúdo extra no rodapé do calendário.
dropdownicon—O ícone do botão do calendário.

Usado nestes templates