Data HTML: value, min, max, step e formato
HTML <input type="date"> fornece um controle para ano, mês e dia. Sua aparência no calendário e a ordem exibida podem variar de acordo com o navegador e a localidade, mas o valor e os valores enviados são normalizados para YYYY-MM-DD. Eles não incluem hora ou fuso horário.
Defina uma data inicial e o intervalo permitido
Use value para a data inicial e min/max para as datas mínima e máxima permitidas. Ambos os limites estão incluídos. Os atributos precisam de strings de data válidas em vez de textos localizados como “20 de maio de 2030.” Valores mínimos ou máximos inválidos podem não impor a restrição desejada.
name é o nome do campo enviado e id associa o rótulo. Use required para entrada obrigatória. Um intervalo não faz com que todos os navegadores impeçam a entrada de datas da mesma forma; uma data fora do intervalo inserida diretamente falha na validação da restrição.
Exemplo completo: inspecione a string de data e a validade
Salve o seguinte documento como date-demo.html e abra-o em um navegador. Ele exibe uma data escolhida dentro de maio de 2030 para prática, sem fazer uma reserva ou enviar dados para um servidor.
<!doctype html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Conferir valores de data</title>
</head>
<body>
<h1>Prática de data de visita</h1>
<form id="demo">
<label for="visit">Data da visita (maio de 2030, obrigatória)</label>
<input type="date" id="visit" name="visit"
value="2030-05-20" min="2030-05-01" max="2030-05-31" step="1" required>
<button type="submit">Mostrar valor</button>
<button type="reset">Redefinir</button>
</form>
<p id="result" aria-live="polite"></p>
<script>
const form = document.getElementById('demo');
const result = document.getElementById('result');
form.addEventListener('submit', (event) => {
event.preventDefault();
result.textContent = 'visit = ' + new FormData(form).get('visit');
});
form.addEventListener('reset', () => { result.textContent = ''; });
</script>
</body>
</html>- Envie a data inicial para exibir:
visit = 2030-05-20 - Escolha outra data em maio e envie para exibir sua string de data. Uma data fora do intervalo é bloqueada pela validação min/max.
- Limpe a data e envie: a validação obrigatória a bloqueia. Redefinir retorna para 20 de maio.
A unidade step é dias e seu valor padrão é 1. Altere apenas o passo para 7 no exemplo: 1º de maio, a data mínima, torna-se a base, então 1º, 8, 15, 22 e 29 de maio se encaixam no intervalo. O valor inicial 20 de maio não se encaixa mais. Compare uma seleção válida de 8 de maio, depois restaure o passo para 1 para permitir todos os dias. Uma única configuração de passo não implementa um calendário de negócios com fins de semana ou feriados.
Formatos de exibição, fusos horários e validação do servidor
Não coloque barras ou strings localizadas no valor para alterar o seletor de data específico do local. Se você precisa apenas de uma data de calendário, tratá-la como uma string evita conversões desnecessárias de fuso horário. Dados que também precisam de hora requerem mais do que apenas a data e uma política de fuso horário separada.
Controle a largura com CSS em vez de um atributo de tamanho. Forneça um rótulo e explicação do intervalo, e valide datas reais, anos bissextos, intervalos e disponibilidade conforme as regras da aplicação no servidor para controles não suportados ou solicitações que ignoram as verificações do navegador. Selecionar uma data não reserva um lugar nem confirma a disponibilidade atual de vagas. A referência de entrada de data MDN explica as regras de atributo.
