DatePicker
Gatilho com o mesmo visual do Input e um Calendar no Popover. Escolhe uma data ou um intervalo e mostra o valor em dd/MM/yyyy. Fecha ao concluir a escolha e devolve o foco ao gatilho.
Data única
Os signatários têm até 31/10/2026 para assinar.
Escolha quando o primeiro lembrete sai.
Intervalo
O primeiro clique marca o início e o segundo marca o fim, em qualquer ordem. Dois meses lado a lado, empilhados no celular.
Envelopes concluídos dentro do período entram no pacote de evidências.
Data e hora
withTime acrescenta os campos de hora e um botão Aplicar; o calendário não fecha ao escolher o dia. No intervalo, a hora inicial começa em 00:00 e a final em 23:59, para o filtro cobrir os dias inteiros. O fim do intervalo cobre o minuto todo: 23:59 vira 23:59:59.999, e 18:30 vira 18:30:59.999.
Eventos entre as duas datas e horas.
Tamanhos e desabilitado
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| mode | "single" | "range" | "single" | Data única ou intervalo de início e fim. |
| value | Date | DateRange | — | Valor controlado. DateRange é { from, to }. |
| onValueChange | (value) => void | — | Recebe a data ou o intervalo completo. |
| withTime · minuteStep | boolean · number | false · 5 | Escolhe também a hora (e no intervalo, hora inicial e final), com botão Aplicar. minuteStep é o passo dos minutos. |
| placeholder | string | "dd/mm/aaaa" | Texto do gatilho vazio. |
| minDate / maxDate | Date | — | Limites: dias fora ficam indisponíveis e a navegação para nos meses-limite. |
| disabledDates | Matcher | Matcher[] | — | Outros dias indisponíveis, como fins de semana. |
| numberOfMonths | number | 1 ou 2 | Meses no calendário: 1 para data única, 2 para intervalo. |
| size | "sm" | "md" | "lg" | "md" | Altura h-form-sm, h-form-md ou h-form-lg, igual ao Input. |
| align | "start" | "center" | "end" | "start" | Alinhamento do calendário em relação ao gatilho. |
| open / defaultOpen / onOpenChange | boolean / (open) => void | — | Controle de abertura do Popover. |
| aria-invalid / aria-describedby / id | — | — | Vão para o gatilho. O Field passa sozinho. |
const [expiresAt, setExpiresAt] = useState<Date>();
<Field label="Prazo de expiração do envelope">
{(control) => (
<DatePicker {...control} value={expiresAt} onValueChange={setExpiresAt} minDate={new Date()} />
)}
</Field>
<DatePicker mode="range" value={period} onValueChange={setPeriod} />