Date Picker

Seletor de data e de período, com atalhos fixos para hoje e para limpar.

Exemplos

Padrão

Label flutuante

Pequeno (size)

Tamanho pequeno com texto de ajuda

Estados no tamanho pequeno (ajuda, desabilitado, inválido)

Com min/max

Com intervalo de anos personalizado

Sem seletor de ano

Com texto de ajuda

Com label flutuante e texto de ajuda

Desabilitado

Inválido (erro)

Date Range Picker

Date Range Picker pequeno (size)

Date Range Picker pequeno com texto de ajuda

Estados do Date Range Picker pequeno (desabilitado, inválido)

Date Range Picker com texto de ajuda

Date Range Picker desabilitado

Date Range Picker inválido (erro)

Teclado

Ao abrir, o foco vai para o dia selecionado (ou para hoje). Só esse dia entra na ordem do Tab: o Tab seguinte vai para o rodapé.

• Setas para os lados: dia anterior ou seguinte.
• Setas para cima e para baixo: mesma data na semana anterior ou seguinte.
• Home e End: domingo e sábado da semana.
• Enter ou Espaço: escolhe o dia focado.
• Escape: fecha o calendário e devolve o foco ao campo.

Na borda do mês, as setas trocam o mês exibido. Elas param nos limites de min, max e yearRange.

API

DatePicker

Propriedade	Tipo	Padrão	Descrição
value	Date | null	-	Valor selecionado (controlado).
defaultValue	Date | null	null	Valor inicial (não controlado).
onValueChange	(value: Date | null) => void	-	Função chamada quando o usuário escolhe ou limpa uma data.
min / max	Date	-	Desabilita as datas fora dos limites.
placeholder	string	"Selecione uma data"	Texto exibido quando nenhuma data está selecionada.
format	(date: Date) => string	-	Função personalizada de formatação de data.
disabled	boolean	false	Desabilita o date picker.
className	string	-	Classes CSS adicionais para o container.
inputClassName	string	-	Classes CSS adicionais para o botão trigger.
contentClassName	string	-	Classes CSS adicionais para o conteúdo do popover do calendário.
yearRange	{ start: number; end: number }	{ start: 1950, end: currentYear }	Intervalo de anos exibido no seletor de ano. A faixa também limita as setas de mês e o mês exibido ao abrir (um valor fora dela abre no limite mais próximo). Com o padrão, não dá para passar de dezembro do ano atual: para datas futuras, aumente end (ex.: { start: 1950, end: new Date().getFullYear() + 2 }).
showYearSelector	boolean	true	Define se o dropdown de seleção de ano aparece. Quando false, o ano é exibido como texto estático em vez de dropdown.
invalid	boolean	false	Quando true, aplica o estilo de estado de erro ao trigger e ao DatePickerText.
size	"lg" | "md"	"lg"	Tamanho do trigger. "md" renderiza uma variante compacta, igual ao Input size="md".

DateRangePicker

Propriedade	Tipo	Padrão	Descrição
value	{ start: Date | null; end: Date | null } | null	-	Período selecionado (controlado).
defaultValue	{ start: Date | null; end: Date | null } | null	null	Período inicial (não controlado).
onValueChange	(value: { start: Date | null; end: Date | null } | null) => void	-	Função chamada quando o usuário escolhe ou limpa um período.
min / max	Date	-	Desabilita as datas fora dos limites.
placeholder	string	"Selecionar período"	Texto exibido quando nenhum período está selecionado.
format	(date: Date) => string	-	Função personalizada de formatação de data.
disabled	boolean	false	Desabilita o date range picker.
className	string	-	Classes CSS adicionais para o container.
inputClassName	string	-	Classes CSS adicionais para o botão trigger.
contentClassName	string	-	Classes CSS adicionais para o conteúdo do popover do calendário.
yearRange	{ start: number; end: number }	{ start: 1950, end: currentYear }	Intervalo de anos exibido no seletor de ano. A faixa também limita as setas de mês e o mês exibido ao abrir (um valor fora dela abre no limite mais próximo). Com o padrão, não dá para passar de dezembro do ano atual: para datas futuras, aumente end (ex.: { start: 1950, end: new Date().getFullYear() + 2 }).
showYearSelector	boolean	true	Define se o dropdown de seleção de ano aparece. Quando false, o ano é exibido como texto estático em vez de dropdown.
invalid	boolean	false	Quando true, aplica o estilo de estado de erro ao trigger e ao DatePickerText.
size	"lg" | "md"	"lg"	Tamanho do trigger. "md" renderiza uma variante compacta, igual ao Input size="md".

DatePickerText

Texto de ajuda exibido abaixo do trigger do date picker. Fica com estilo de erro quando o DatePicker ou DateRangePicker pai tem invalid={true}.

Propriedade	Tipo	Descrição
children	React.ReactNode	Mensagem de ajuda ou de erro. Use como filho de DatePicker ou DateRangePicker.
className	string	Classes CSS adicionais.

DatePickerWrapper

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o wrapper.
children	React.ReactNode	Componentes filhos (normalmente Label ou DatePickerLabel e DatePicker).

DatePickerLabel

Propriedade	Tipo	Descrição
htmlFor	string	Associa o label ao id de um DatePicker.
className	string	Classes CSS adicionais para o label.
children	React.ReactNode	Texto do label.