← Voltar à biblioteca
Formulários

Intervalo de datas

Date range picker

Seleciona o início e o fim de um período.

Exemplo didático · Experimente os controles acima

Quando usar

Filtrar relatórios por período ou escolher uma estadia.

Cuidados e acessibilidade

Valide a ordem e ofereça rótulos separados para início e fim.

Partes e comportamento

Data inicial e final com rótulos distintos e indicação do período escolhido.

Não confunda

Duas datas independentes não necessariamente formam um intervalo; estabeleça a relação.

Exemplo de código

<label for="inicio">Data inicial</label>
<input type="date" id="inicio" name="inicio">
<label for="fim">Data final</label>
<input type="date" id="fim" name="fim">
<!-- Valide também no servidor que fim não antecede início. -->

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

BIBLIOTECA UI / EXPLORAR