Date Range Picker

Seletor de intervalo de datas. Mesmo padrão visual do `DatePicker`, com Calendar em modo range e 2 meses por default.

Utilização

index.tsx
import { DateRangePicker, type DateRange } from "@convertcompany/ui";

Exemplos

Apenas 1 mês visível

Default é 2 meses lado a lado. Para 1 mês:

Com chips de presets

Padrão comum em dashboards: chips de atalho ("Hoje", "Últimos 7 dias", "Este mês") ao lado do picker. O chip ativo reflete o range atual.

Hoje
Ontem
Últimos 7 dias
Este mês

Props

PropriedadeTipo
valueIntervalo selecionado.
DateRange ({ from: Date, to?: Date })
onChangeCallback de seleção.
(range: DateRange | undefined) => void
placeholderTexto quando vazio. Default: "Selecione um período".
string
numberOfMonthsQuantos meses lado a lado. Default 2.
number
disabledDesabilita o trigger (boolean) ou datas específicas (Matcher).
boolean
Matcher
Matcher[]
format / formatOptions / localeIgual ao DatePicker. Default formatOptions: { dateStyle: 'medium' }.
(d: Date) => string
Intl.DateTimeFormatOptions
DayPickerLocale
alignAlinhamento do popover.
start
center
end
triggerProps / calendarPropsProps extra para o trigger e o Calendar interno.
...