Ravox KitFormulário

Seletor de data

Campo de data que aceita as duas coisas: digitar dd/mm/aaaa (as barras entram sozinhas) ou escolher no calendário que abre por cima. O SeletorPeriodo pega um intervalo com dois campos, dois meses e atalhos como "Últimos 7 dias". Avisa data que não existe, fora do limite ou indisponível.

Vencimento do boleto

Digite só os números: as barras entram sozinhas.

Ajustes

Tipo

Tamanho

AtalhosSó de hoje em dianteDesabilitado

Exemplos

Nascimento: digitar é mais rápido

Data de nascimento

Mais rápido digitando: 14031992.

Período com atalhos

Vendas no período

Entrega: limites e atalhos próprios

Entrega agendada

Não entregamos aos domingos.

Com erro do formulário

Início do contrato

Informe quando o contrato começa.

Instalação

O shadcn cria components/ui/seletor-data.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.

npx shadcn@latest add https://ui.ravoxlabs.com/r/seletor-data.json

Opções

Opção	Tipo	Padrão	O que faz
valor / padrao	Date \| null · { inicio?, fim? }	—	SeletorData usa uma data; SeletorPeriodo, um intervalo.
aoTrocar	(data: Date \| undefined) => void · (periodo) => void	—	Chamado ao escolher no calendário, num atalho ou quando a data digitada fica completa e válida. Campo apagado manda undefined.
atalhos	{ rotulo, data(hoje) }[] · { rotulo, periodo(hoje) }[]	—	Botões ao lado do calendário. Prontos: atalhosData e atalhosPeriodo (Hoje, Últimos 7 dias, Este mês, Mês passado…).
min · max · desabilitar	Date · Date · (dia: Date) => boolean	—	Limites que valem no calendário e no que for digitado (com a mensagem certa).
rotulo · dica · erro	ReactNode	—	Rótulo, ajuda e erro. Sem erro de fora, o próprio campo avisa data incompleta, inexistente ou fora do limite.
tamanho	"pequeno" \| "medio" \| "grande"	"medio"	Altura: 32, 40 ou 48px.
inicioSemana	0 a 6	0	Dia que abre a semana no calendário.
aoSair	() => void	—	Foco saiu do campo e do calendário (o onBlur do Controller).
name · nomes	string · [string, string]	—	Manda a data em ISO (aaaa-mm-dd) em <input type="hidden">. No período, um nome para cada ponta.
rotulosCampos	[string, string]	["Data inicial", "Data final"]	SeletorPeriodo: o que o leitor de tela lê em cada campo.
classeBloco · classePainel	string	—	Classes do bloco de fora e do painel flutuante. className vai na caixa do campo.