Como pegar data no padrão dia mês e ano e inserir em input

Neste artigo você vai ver como criar data no padrão dia mês e ano e inserir em input utilizando JavaScript puro

Fala programador(a), beleza? Bora aprender mais sobre datas e inputs em JavaScript!

A primeira coisa que precisamos fazer é criar a nossa data, aqui vou utilizar a criação de data atual

Mas você pode modificar como desejar depois

No objeto Date de JavaScript temos a função toLocaleDateString, que converte a data no padrão brasileiro para uma string

Ela será nossa escolhida para gerar a data em texto

Depois disso apenas precisamos selecionar o input que queremos inserir a data

E por fim modificar sua propriedade value para o valor gerado pela função

Veja um exemplo:

const myDate = new Date().toLocaleDateString();

console.log(myDate); // 29/07/2022 

const myInput = document.querySelector("#date-input");

myInput.value = myDate;

Nas duas primeiras linhas geramos a nossa nova data

Depois selecionamos o elemento com o método querySelector, que permite escolher pelo seletor de CSS, uma mão na roda

E por fim é feita a alteração em value, e temos a data preenchida no input 🙂

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Conclusão

Neste artigo você aprendeu a como criar uma data no padrão dia mês e ano e inserir em input

Utilizamos Date para criação da data e depois selecionamos o elemento com querySelector

Para preencher o input, foi apenas necessário alterar a propriedade value

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os curso

O que sai no console depende de onde o código roda:

Repara que a data do exemplo é só um exemplo, ela muda conforme o dia

E tem outro detalhe: o toLocaleDateString sem nenhum argumento olha para a configuração de idioma e região do ambiente

Ou seja, o mesmo script pode devolver a ordem trocada em outro computador ou num servidor com outra configuração

Para travar o padrão brasileiro, passa o locale na mão:

const myDate = new Date().toLocaleDateString("pt-BR");

Simples assim e você não fica na mão da configuração da máquina 🙂

Como garantir o formato dd/mm/aaaa sempre:

Tem hora que você quer controle total do que vai para o input, sem depender de nada

Aí dá para pedir dois dígitos direto no toLocaleDateString:

const myDate = new Date().toLocaleDateString("pt-BR", {
day: "2-digit",
month: "2-digit",
year: "numeric",
});

Ou montar a string na unha, juntando as partes da data:

const hoje = new Date();

const dia = String(hoje.getDate()).padStart(2, "0");
const mes = String(hoje.getMonth() + 1).padStart(2, "0");
const ano = hoje.getFullYear();

const myDate = `${dia}/${mes}/${ano}`;

O padStart é o cara que coloca o zero à esquerda, então dia 5 vira 05

E se liga no getMonth: ele começa no zero, janeiro é 0 e dezembro é 11, por isso o + 1

Esse é o erro clássico da brincadeira: o mês vem sempre um atrás e a gente procura o problema no lugar errado

E se o input for type="date"?

Aqui mora a pegadinha que pega quase todo mundo

Input de texto aceita qualquer string, então a data no padrão brasileiro entra numa boa

Já o input type="date" trabalha com o value no formato ano-mês-dia, com traços

Se você jogar 29/07/2022 nele, o campo continua vazio e nada aparece no console, o que dá aquela sensação de que o código nem rodou

Que formato é esse? É o ISO: ano com quatro dígitos, mês e dia com dois, tipo 2022-07-29

O que o usuário VÊ na tela é a data no formato da região dele, mas o value por baixo é sempre esse

Bora montar:

const hoje = new Date();

const ano = hoje.getFullYear();
const mes = String(hoje.getMonth() + 1).padStart(2, "0");
const dia = String(hoje.getDate()).padStart(2, "0");

const myInput = document.querySelector("#date-input");

myInput.value = `${ano}-${mes}-${dia}`;

Pronto, agora o campo de data já abre preenchido 😀

Como ler a data que o usuário escolheu:

O caminho de volta também vale a pena conhecer

Num input type="date", o value que você lê já vem no formato ISO, então dá para mandar direto para banco e API

const myInput = document.querySelector("#date-input");

console.log(myInput.value); // 2022-07-29

E se o campo for texto, com a data no padrão brasileiro, você quebra a string e monta o objeto Date:

const data = new Date(ano, mes - 1, dia);

Repara no mes – 1 de novo, ele é chato mas é assim que funciona

Tome cuidado com um detalhe: quando você passa só a string ISO para o new Date, a data é interpretada em UTC e pode aparecer o dia anterior dependendo do fuso

Por isso montar com ano, mês e dia separados costuma ser mais seguro

Perguntas frequentes:

Como preencher o input assim que a página abre?

Coloque a tag script depois do input no HTML, ou use o atributo defer nela

Se o script rodar antes do elemento existir, o querySelector devolve null e você leva aquele erro de Cannot set properties of null

Dá para colocar a hora junto com a data?

Dá sim: em campo de texto, troque por toLocaleString, que traz data e hora

Se o campo for type="datetime-local", o value pede o ano-mês-dia com a hora depois de um T, tipo 2022-07-29T14:30

Como impedir que escolham uma data fora do intervalo?

Os atributos min e max do input de data resolvem, e você pode preencher eles pelo JavaScript com a mesma string ISO que a gente montou ali em cima

E guarda a diferença entre os dois campos, que é o que mais confunde: input de texto aceita a data no padrão dia/mês/ano, input type="date" quer o formato ano-mês-dia

Com o padStart e o getMonth + 1 na cabeça, você monta qualquer um dos dois sem sofrer