Para somar dois dias a uma data, basta usar um Date
e somar 2 ao valor de getDate()
(usando setDate
para atualizar o valor):
let d = new Date(); // data atual
d.setDate(d.getDate() + 2); // somar 2 dias
Detalhe: se o dia for, por exemplo, 30 de abril, ao somar 2 o valor passa a ser 32. Mas felizmente o método setDate()
já faz os ajustes automaticamente, resultando em 2 de maio. O mesmo vale para outras datas, como 31 de dezembro (ao somar 2, o valor do dia passa a ser 33, mas é ajustado para 1 de janeiro do ano seguinte) e 28 ou 29 de fevereiro em anos bissextos (você não precisa se preocupar se o ano é bissexto ou não, setDate()
já faz os ajustes corretamente).
Este é um erro que a outra resposta está cometendo: ela soma o valor do dia manualmente, sem se atentar para esses casos especiais, em que é preciso ajustar os valores. "Funciona" para muitos casos, mas falha para vários outros.
No exemplo acima eu uso a data atual, mas o código para somar 2 dias é o mesmo para qualquer data que você tenha (e como não ficou claro de onde vem esta data, vou deixar o exemplo assim mesmo).
Agora vem a parte de adicionar esta data no h1
(retirei os styles para focar na parte que interessa):
<h1 id="newDate"></h1>
Este elemento tem um id
, então podemos obtê-lo usando document.getElementById
. Em seguida, pode setar o innerHTML
do mesmo para colocar a data dentro dele:
let d = new Date(); // data atual
d.setDate(d.getDate() + 2); // somar 2 dias
// buscar elemento cujo id é newDate, e colocar a data como seu conteúdo
document.getElementById('newDate').innerHTML = d;
<h1 id="newDate"></h1>
Com isso, o texto dentro do h1
será algo do tipo:
Sat Apr 06 2019 11:05:43 GMT-0300 (Horário Padrão de Brasília)
Na verdade, a saída exata vai variar, não só por causa da data/hora atual, mas também por causa do fuso horário que estiver configurado no seu browser (que por default é o do sistema operacional).
De qualquer forma, o formato acima é o mesmo retornado por d.toString()
(que é o default usado quando atribuímos o Date
diretamente para innerHTML
). Se quiser a data em outro formato, terá que fazer isso manualmente. Por exemplo, para formatá-la como dd/mm/aaaa
:
let d = new Date(); // data atual
d.setDate(d.getDate() + 2); // somar 2 dias
let dataFormatada = `${d.getDate().toString().padStart(2, '0')}/${(d.getMonth() + 1).toString().padStart(2, '0')}/${d.getFullYear()}`;
document.getElementById('newDate').innerHTML = dataFormatada;
<h1 id="newDate"></h1>
Agora o resultado é 06/04/2019
(se rodar o código hoje, obviamente - estou usando a data atual, então amanhã o resultado será 07/04/2019
).
Um detalhe chato é que getMonth()
retorna o valor do mês indexado em zero (janeiro é zero, fevereiro é 1, etc), então sempre precisa lembrar de somar 1.
Também usei a sintaxe de template string, delimitada por `
e que possibilita colocar expressões dentro dela (delimitadas por ${}
). Mas se quiser, também pode usar a boa e velha sintaxe de concatenação de strings:
let dataFormatada = d.getDate().toString().padStart(2, '0') + '/'
+ (d.getMonth() + 1).toString().padStart(2, '0') + '/'
+ d.getFullYear();
Outra opção é usar toLocaleDateString()
, que retorna a data no formato específico do locale (do idioma padrão) que está configurado no browser. No meu caso o browser está em português do Brasil, então o retorno é 06/04/2019
. Se o browser estiver em inglês americano, o retorno será 4/6/2019
.
Você também pode passar um código de locale específico, para não depender das configurações do browser. Por exemplo, para português do Brasil, use d.toLocaleDateString('pt-BR')
, e assim será usado o formato referente ao português do Brasil, independente do que estiver configurado no browser (lembrando que os formatos que dependem de um locale podem variar, conforme explicado nesta resposta).
Outro detalhe é que mudando o valor do innerHTML
você altera todo o conteúdo do h1
. Por exemplo, se ele já tiver um texto antes, este será sobrescrito:
let d = new Date(); // data atual
d.setDate(d.getDate() + 2); // somar 2 dias
let dataFormatada = `${d.getDate().toString().padStart(2, '0')}/${(d.getMonth() + 1).toString().padStart(2, '0')}/${d.getFullYear()}`;
document.getElementById('newDate').innerHTML = dataFormatada;
<h1 id="newDate">Um texto qualquer</h1>
Repare que Um texto qualquer
some e é substituído pela data. Mas também é possível acrescentar a data ao texto já existente, concatenando-a ao innerHTML
:
let d = new Date(); // data atual
d.setDate(d.getDate() + 2); // somar 2 dias
let dataFormatada = `${d.getDate().toString().padStart(2, '0')}/${(d.getMonth() + 1).toString().padStart(2, '0')}/${d.getFullYear()}`;
document.getElementById('newDate').innerHTML += ' ' + dataFormatada;
// ^^ concatenar em vez de sobrescrever
<h1 id="newDate">Um texto qualquer</h1>
Agora o texto do h1
é Um texto qualquer 06/04/2019
.
Moment.js
Outra alternativa é usar o Moment.js, uma excelente biblioteca para lidar com datas. Talvez pareça exagero adicionar uma biblioteca só para isso, mas se tem gente que adiciona dependências para coisas bem mais triviais, porque não usar uma para algo mais complexo, como lidar com datas? (e acredite, aritmética de datas é mais difícil do que parece):
let d = moment(); // data atual
// ou, se você já tiver um Date, faça: d = moment(date)
d.add(2, 'days'); // somar 2 dias
document.getElementById('newDate').innerHTML = d.format('DD/MM/YYYY'); // formatar a data
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<h1 id="newDate"></h1>
Se em vez da data atual, quiser criar uma data específica, basta fazer:
// criando data de 3 de abril de 2019
// com Date
let d = new Date(2019, 3, 3);
// com Moment.js
let d = moment([2019, 3, 3]);
Ambos os exemplos acima criam a data de 3 de abril de 2019. O detalhe é que, como já foi dito, os meses são indexados em zero, por isso abril é o mês 3.
Em seguida, para somar 1 dia a esta data, basta usar os métodos já citados acima.
Nos exemplos acima eu também poderia usar innerText
em vez de innerHTML
. Para os casos específicos desta pergunta, o resultado é o mesmo, mas é interessante saber que há casos em que pode fazer diferença usar um ou outro.
Para colocar o JavaScript na sua página, basta usar a tag script
:
<script type="text/javascript" src="arquivo.js"></script>
Sobre este ponto específico, sugiro esta leitura.