Pular para o conteúdo
Camaleo
PT · ENGitHub
// visualizar em
salvo em todas as páginas

Date picker

Seletor de data — um campo em que você digita ou escolhe num calendário. Use para datas próximas de hoje, como uma entrega, uma reserva ou um prazo.

Feito com React AriaPadrão WAI-ARIA Date Picker DialogComponente clienteCódigo ↗
minimal · light · #3fa34d

Entregamos de segunda a sábado, das 8h às 18h.

disabled
readOnly
invalid

Instalação

Configure o Camaleo uma vez (Instalação) e importe o que precisar. As datas são objetos do @internationalized/date, reexportados pela biblioteca. Coloque o seletor num Field para dar um rótulo a ele.

import { DatePicker, CalendarDate, CalendarDateTime, isWeekend, Field, FieldLabel } from "@camaleo/react";

Anatomia

Uma caixa com um segmento editável para cada parte da data e um botão que abre um Calendar num popup. O popup é renderizado num portal e mantém o estilo.

14 / 11 / 2026botãopopup
[data-slot="date-picker"] · [data-slot="date-picker-control"][data-slot="date-picker-trigger"] · [data-slot="date-picker-popup"][data-slot="date-input"] · [data-slot="date-segment"]

Exemplos

Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.

minimal · light · #3fa34d

Entregamos de segunda a sábado, das 8h às 18h.

Chega sábado, 14 de novembro de 2026

Controlado, com o dia da semana

Escolha outro dia. Escrever o dia da semana na descrição pega um sábado que ninguém queria escolher.

Aberto de 02/11 a 18/12/2026.

Escolha uma data até 18/12. A pousada fecha para as festas depois disso.

Data mínima e máxima

minValue e maxValue riscam os dias fora do intervalo. Confira o valor também e use invalid no Field, para que uma data digitada receba a mensagem.

De segunda a sexta. Fins de semana aparecem riscados no calendário.

Datas indisponíveis

isDateUnavailable com isWeekend bloqueia os fins de semana do idioma da página. Diga a regra na descrição, porque o calendário fica escondido até abrir.

Horário de Brasília. Cada participante vê no próprio fuso.

Data e hora

Passe um CalendarDateTime e granularity="minute" para ganhar segmentos de hora e minuto. O hourCycle={24} tira o AM/PM onde o relógio de 24 horas é mais claro, como na agenda de um webinar.

O calendário abre em março de 2027, mês da conferência.

Abre no mês certo

Sem valor, o calendário abre no dia de hoje. O placeholderValue abre onde estão as datas que importam, sem preencher o campo.

Definido na assinatura do contrato. Peça ao seu gerente de conta para mudar.

Somente leitura

O readOnly deixa a data focável e legível, ao contrário do disabled. Diga na descrição quem pode mudar.

Obrigatório num formulário

Envie o formulário vazio. O erro diz o que falta, fica ligado ao campo e some assim que uma data é escolhida.

Em contexto

Datas fazem parte de tarefas maiores. São pedaços inteiros de interface para copiar, no estilo que você escolheu.

Buscar voos

Busca de voosCard · Field · Input · DatePicker · Button

Agendar post

Horário de Brasília. Dá para reagendar até a publicação.

Agendar um postCard · Field · Textarea · DatePicker · Button

Nova cobrança

Emitida em 28/10/2026.

Segue o prazo de pagamento. Mude para um acordo pontual.

Vencimento da cobrançaCard · Field · Input · NativeSelect · DatePicker · Button

Boas práticas

FaçaCalendário para datas próximas.

Uma entrega ou uma reserva fica a poucos cliques, e o calendário mostra o dia da semana.

EviteCalendário para data de nascimento.

Voltar 30 anos, mês a mês, é lento. Use um DateField e deixe a pessoa digitar.

De segunda a sexta. Fins de semana aparecem riscados no calendário.

FaçaDiga quais datas valem.

A regra aparece antes de a pessoa abrir o calendário ou digitar uma data.

Data indisponível.
EviteRegra descoberta pelo erro.

"Data indisponível." chega tarde demais e não diz quais datas estão livres.

Props

O DatePicker recebe as props do date picker do React Aria. Estas são as mais usadas:

PropriedadeTipoPadrãoDescrição
classNamestring—Classe do elemento raiz.
styleCSSProperties—Estilo inline do elemento raiz.
openboolean—Abre ou fecha o calendário, controlado. Use junto com onOpenChange.
disabledboolean—Desativa os segmentos e o botão do calendário.
readOnlybooleanfalseMostra a data e deixa focável, mas não deixa mudar.
invalidboolean—Marca o seletor como inválido. Dentro de um Field, vale o invalid do campo quando esta prop não é passada.
requiredbooleanfalseMarca o seletor como obrigatório para as tecnologias assistivas.
localestring—O idioma que define a ordem dos segmentos, os nomes dos meses e o primeiro dia da semana, como "pt-BR". Usa o do navegador por padrão.
weekdayStyle"narrow" | "short" | "long""short"Como os dias da semana aparecem no calendário. O padrão é "short".
triggerLabelstring—Nome acessível do botão do calendário. O React Aria já traz um padrão traduzido.
previousLabelstring—Nome acessível do botão de mês anterior. O React Aria já traz um padrão traduzido.
nextLabelstring—Nome acessível do botão de próximo mês. O React Aria já traz um padrão traduzido.
calendarFooterReactNode—Conteúdo mostrado abaixo da grade do calendário, como uma legenda ou um aviso.
valueDateValue | null—A data, controlada. null quando o campo está vazio.
defaultValueDateValue | null—A data inicial, não controlada.
onChange(value: DateValue | null) => void—Roda quando a data muda, pelo teclado ou pelo calendário.
namestring—Identifica a data no envio do formulário, no formato ISO.
onOpenChange(isOpen: boolean) => void—Roda quando o calendário abre ou fecha.
minValueDateValue—A data mais cedo permitida.
maxValueDateValue—A data mais tarde permitida.
isDateUnavailable(date: DateValue) => boolean—Devolve true para os dias que não podem ser escolhidos.
placeholderValueDateValue—A data usada para abrir o calendário e preencher os segmentos quando não há valor.
hourCycle12 | 24—Força o relógio de 12 ou 24 horas. Por padrão, segue o idioma.
granularity"day" | "hour" | "minute" | "second"—A menor parte editável. "hour", "minute" e "second" adicionam a hora.
firstDayOfWeek"sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat"—O primeiro dia da semana no calendário. Por padrão, segue o idioma.

As outras props do React Aria passam direto, como defaultOpen, shouldCloseOnSelect, hideTimeZone, shouldForceLeadingZeros, pageBehavior e autoFocus.

Styling hooks

Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio seletor. O calendário do popup lê os tokens do Calendar.

Atributos

data-slot"date-picker" · "date-picker-control" · "date-input" · "date-segment" · "date-picker-trigger" · "date-picker-popup"
data-openna raiz enquanto o calendário está aberto
data-invalidna raiz, no controle e nos segmentos quando inválido
data-disabledpresente quando desativado
data-focus-withinna raiz e no controle enquanto um segmento tem foco
data-placeholder · data-typenum segmento: ainda vazio · a parte dele (dia, mês, ano, literal…)

Tokens que ele lê

Cor

--cml-accent--cml-accent-fg--cml-border--cml-border-control--cml-danger--cml-fg--cml-fg-muted--cml-fg-secondary--cml-field-bg--cml-field-border-sides--cml-field-shadow--cml-focus-offset--cml-focus-ring--cml-focus-width--cml-popover-bg--cml-popover-border--cml-shadow-popover--cml-surface-raised

Forma e tamanho

--cml-border-width--cml-field-border-width--cml-field-height--cml-field-padding--cml-font-size-field--cml-popover-border-width--cml-radius-control--cml-radius-control-sm--cml-radius-field--cml-radius-popover

Tipografia e movimento

--cml-duration-fast--cml-ease-standard--cml-font-field

Só deste componente

--cml-corner-shape--cml-disabled-opacity--cml-item-highlight--cml-segment-focus-bg--cml-segment-focus-border--cml-segment-focus-fg--cml-segment-focus-shadow--cml-segment-radius
/* destaque mais suave nos segmentos, só no formulário de reserva */
.reserva [data-slot="date-segment"] {
  --cml-segment-focus-bg: var(--cml-item-highlight);
  --cml-segment-focus-fg: var(--cml-fg);
}

Acessibilidade

TabPassa pelos segmentos e depois pelo botão do calendário.
Seta para cima / Seta para baixoAumenta ou diminui o segmento focado.
Seta para a esquerda / Seta para a direitaVai para o segmento anterior ou o próximo.
0–9Digita no segmento e avança quando ele está completo.
BackspaceLimpa o segmento focado.
Alt + Seta para baixoAbre o calendário a partir de um segmento.
Setas (calendário)Andam entre os dias. Page Up / Page Down trocam o mês.
EnterEscolhe o dia focado e fecha o calendário.
EscapeFecha o calendário e devolve o foco ao botão.

Relacionados

Date range pickerData de início e de fim num só campo.Date fieldUma data digitada, sem calendário.CalendarA grade do mês sozinha.
Esta página foi útil? · Editar esta página no GitHub