Seletor de intervalo de datas — início e fim num só campo, digitadas ou escolhidas num calendário de intervalo. Use para hospedagens, férias, relatórios e tudo que dura mais de um dia.
Feito com React AriaPadrão WAI-ARIA Date Picker DialogComponente clienteCódigo ↗
minimal · light · #3fa34d
21/12/2026
–
31/12/2026
Aparece na página de status e nas respostas automáticas.
Configure o Camaleo uma vez (Instalação) e importe o que precisar. O valor é um objeto { start, end } com datas do @internationalized/date, reexportadas pela biblioteca. Coloque o seletor num Field para dar um rótulo a ele.
O DateRangePicker recebe as props do date range 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 dois campos e o botão do calendário.
readOnlybooleanfalseMostra o intervalo 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 as duas datas como obrigatórias 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".
separatorReactNode"–"O que fica entre a data inicial e a final. Escondido do leitor de tela. O padrão é "–".
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.
valueDateRange | null—O intervalo, controlado. null quando está vazio.
defaultValueDateRange | null—O intervalo inicial, não controlado.
onChange(value: DateRange | null) => void—Roda quando o intervalo muda, pelo teclado ou pelo calendário.
onOpenChange(isOpen: boolean) => void—Roda quando o calendário abre ou fecha.
minValueDateValue—A data mais cedo permitida.
maxValueDateValue—A data mais tarde permitida.
placeholderValueDateValue—A data usada para abrir o calendário e preencher os segmentos quando não há valor.
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.
allowsNonContiguousRangesboolean—Deixa o intervalo atravessar dias indisponíveis, como fins de semana.
isDateUnavailable(date: DateValue) => boolean—Devolve true para os dias que não podem ser escolhidos.
startNamestring—Identifica a data inicial no envio do formulário, no formato ISO.
endNamestring—Identifica a data final no envio do formulário, no formato ISO.
As outras props do React Aria passam direto, como defaultOpen, shouldCloseOnSelect, hourCycle, hideTimeZone, pageBehavior e autoFocus. Ao contrário do DatePicker, ele não pega o name do Field: use startName e endName.
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 RangeCalendar.