Criar Campo de Data em HTML

Nesse post você vai aprender como criar campo de data em HTML para inserir em seus formulários de forma fácil e prático.

A tag <input> com o atributo type="date" é uma das diversas opções que o HTML oferece para entrada de datas em formulários. Esse atributo facilita a seleção de datas e pode ser renderizado de maneira diferente em navegadores diferentes, proporcionando uma experiência de usuário consistente.

Dica: Veja mais posts sobre HTML clicando aqui.

Veja abaixo um formulário simples que podemos dar como exemplo de uso do <input type=”date”>

<form>
    <label for="data">Selecione uma data:</label>
    <input type="date" id="data" name="data">
    <input type="submit" value="Enviar">
</form>

O resultado será esse:

Selecione uma data:

Outros Atributos para o <input type=”date”>

Podemos usar alguns outros atributos para personalizarmos o nosso campo de data em HTML.

• max para definir uma data máxima
• min para definir uma data inicial a ser exibida no calendário
• value para colocarmos o campo para iniciar com uma data específica.

Por exemplo, se quisermos que o usuário só possa selecionar datas entre 1º de janeiro de 2023 e 31 de dezembro de 2023, e a data padrão exibida é 1º de junho de 2023:

<input type="date" id="data" name="data" min="2023-01-01" max="2023-12-31" value="2023-06-01">

O resultado é esse:

Selecione uma data:

Como colocar <input type=”date”> de mm/dd/yyyy para dd/mm/yyyy

Se você observar, o o elemento <input type="date"> segue o formato ISO para data, que é “YYYY-MM-DD”, podemos não há um parâmetro específico para alterar isso, mas podemos usar o atributo placeholder do formulário para colocarmos um valor padrão juntamente com um valor vazio com value=””

<input type="date" name="data" placeholder="dd-mm-yyyy" value=""  >

Validando com required

Podemos usar o atributo required que quer dizer “obrigatório” em português e serve para tornar obrigatório o preenchimento da data. Se não for preechido, um erro será exibido ao tentar enviar com campo de data vazio.

<input
      type="date"
      name="party"
      min="2023-01-01"
      max="2023-12-20"
      required 
/>

Formato de data – pattern

Um problema é com a digitação da data, o valor é normalizado para o formato ano-mês-dia ou yyyy-mm-dd.

O navegador não reconhece o formato em que a data deve estar, e há muitos formatos nos quais as pessoas escrevem datas. Por exemplo:

• ddmmyyyy
• dd/mm/yyyy
• mm/dd/yyyy
• dd-mm-yyyy
• mm-dd-yyyy
• Month dd, yyyy

Uma maneira de contornar isso é usando o atributo chamado pattern dentro do input. Por exemplo, tente visualizar o seguinte em um navegador incompatível:

<input type="date" name="data" pattern="\d{2}-\d{2}-\d{4}">

Particularmente, acho que a melhor maneira de lidarmos atualmente com datas por meio de plugins ou datepicker do jequery ou outro qualquer.