Date Picker

Campo de seleção de data com suporte a datas únicas, intervalos e integração nativa com formulários.

O mk-date-picker é o componente de seleção de data do Makuco UI. Ele suporta entrada manual no formato DD/MM/AAAA, seleção por calendário em modo único ou intervalo, e integração nativa com formulários via ElementInternals.

Quando usar

Use mk-date-picker para capturar datas em formulários, filtros de período e fluxos em que a entrada deve seguir um formato estruturado.

Use quando:

O usuário precisar informar uma data específica.
O fluxo exigir seleção de um intervalo de datas.
O formulário precisar de validação e envio nativo com name e required.

Prefira uma alternativa quando:

A necessidade for apenas escolher uma hora — use um seletor de horário.
O valor for uma data e hora em um único campo — considere um componente mais específico.

Seleção simples

import { MkDatePicker } from '@db1/makuco-ui-react';

<MkDatePicker label="Data de nascimento" name="birthDate" />

<mk-date-picker label="Data de nascimento" name="birthDate"></mk-date-picker>

Modo intervalo

Use mode="range" para permitir seleção de um período. O primeiro clique define a data inicial e o segundo define a data final.

<MkDatePicker label="Período" mode="range" name="period" />

<mk-date-picker label="Período" mode="range" name="period"></mk-date-picker>

Estado de erro

Defina errorMessage para indicar um valor inválido ou incompleto. A mensagem deve orientar o usuário sobre o formato esperado.

<MkDatePicker label="Data" errorMessage="Data inválida" value="2026-05-14" />

<mk-date-picker label="Data" error-message="Data inválida" value="2026-05-14"></mk-date-picker>

Desabilitado

Use disabled quando a seleção não deve estar disponível para o usuário em determinado contexto.

<MkDatePicker label="Data" disabled value="2026-05-14" />

<mk-date-picker label="Data" disabled value="2026-05-14"></mk-date-picker>

Props

Prop	Tipo	Padrão	Descrição
`label`	`string`	—	Texto do rótulo exibido acima do campo. É obrigatório para acessibilidade.
`name`	`string`	—	Nome do campo para envio em formulários nativos.
`value`	`string \| [string, string]`	—	Valor selecionado. Em `mode="single"`, use uma data ISO (`YYYY-MM-DD`). Em `mode="range"`, use um array com início e fim.
`mode`	`"single" \| "range"`	`"single"`	Define se o componente permite uma única data ou um intervalo.
`errorMessage`	`string`	—	Mensagem exibida abaixo do campo quando o estado é inválido.
`disabled`	`boolean`	`false`	Impede qualquer interação com o componente.
`required`	`boolean`	`false`	Marca o campo como obrigatório em formulários.

Eventos

Evento	Payload	Descrição
`mkChange`	`string \| [string, string]`	Disparado ao confirmar uma seleção. Em `mode="single"`, emite uma data ISO; em `mode="range"`, emite um intervalo.
`mkOpen`	`void`	Disparado quando o calendário é aberto.
`mkClose`	`void`	Disparado quando o calendário é fechado.

Acessibilidade

O campo deve sempre receber um label claro e descritivo.
O componente usa o calendário como diálogo acessível e comunica seu estado por atributos ARIA.
A navegação por teclado deve permitir abrir o calendário, mover-se entre meses e confirmar uma seleção.
Em formulários, prefira name, required e mensagens de erro explícitas para orientar o usuário.

Date Picker

On this page