DateRangeField

O DateRangeField escolhe um período: início e fim, digitando nos segmentos ou abrindo o calendário. É o campo de datas da tela de Métricas. A tela troca só strings AAAA-MM-DD, o formato que cabe na URL; a conversão para o tipo de data do React Aria fica dentro do componente.

import { DateRangeField } from "@rastreio-x/ui";

Padrão

label, from, to e onChange. O campo é controlado: guarde o intervalo no estado.

Com limites

min e max (também AAAA-MM-DD) bloqueiam datas fora da janela. Diga o limite em texto perto do campo, porque o calendário só desabilita os dias.

Guardando na URL

Os valores são strings, então encaixam em parâmetros de busca da rota. Mostre em pt-BR o período escolhido e anuncie a mudança.

Em uma barra de filtros

Dentro de um FilterField mais largo, ao lado de outros filtros, como na tela de Métricas.

Anatomia

DateRangeField
├── Label
├── DateField.Group
│   ├── segmentos do início (dia, mês, ano)
│   ├── separador
│   ├── segmentos do fim
│   └── botão do calendário (Trigger)
└── Popover
    └── RangeCalendar (cabeçalho, grade de dias)

Propriedades

Animações

O calendário abre e fecha com uma transição curta de opacidade e transform do popover do HeroUI, e o realce do intervalo troca de cor ao passar o mouse. Com prefers-reduced-motion, a folha global da fachada reduz as transições a 0,01 ms. Os selos acima vêm de análise estática.

Acessibilidade

• Cada segmento (dia, mês, ano) é focável e editável com o teclado; setas mudam o valor e digitar avança para o próximo segmento.
• O botão do calendário tem nome (Abrir calendário: Datas do Período) e abre o RangeCalendar em um diálogo; Esc fecha e devolve o foco.
• No calendário, setas movem o dia, PageUp e PageDown trocam o mês, e Enter escolhe a ponta do intervalo.
• O dia selecionado é anunciado com a data completa; os dias bloqueados por min/max são marcados como indisponíveis.
• O rótulo sempre visível dá o nome ao grupo. O foco usa o anel azul padrão.

Boas práticas

• O componente já impede início depois do fim; confirme o limite máximo do lado do servidor.
• Guarde o intervalo na URL para a tela ser compartilhável.
• Para uma data só, use um campo de data simples; este componente é para períodos.

Relacionados

• FilterField a barra onde o campo costuma entrar.
• Select para períodos prontos (Últimos 30 dias).
• MetaLine para mostrar o período aplicado.
• Label, Description e FieldError os textos de apoio de campo.