0

Tenho a seguinte tag em HTML:

<h1 id="newDate" style="align: center; font-weight: 100; font-family: Montserrat; font-size: 24px; color: rgb(28, 7, 7);"></h1>

Preciso de um código JavaScript para adicionar dia e mês e acrescentar dois dias à data. Mas o JavaScript tem de ser inserido em folha à parte e chamar este h1 pelo id para inserir nele a data. Como faço isso?

1
  • 1
    1) Pesquise como carregar um arquivo JS no HTML; 2) Pesquise como selecionar o elemento da DOM a partir do id. A parte de adicionar datas você já deve ter visto nas perguntas duplicadas da sua outra pergunta.
    – Woss
    Commented 3/04/2019 às 14:05

2 Respostas 2

1

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.

-1
function datacorrig(){
    dayName = new Array ("00","01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12","13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24","25", "26", "27", "28","29", "30", "31"); 
    monName = new Array ("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12");
    var d = new Date();
    var tp = d.getFullYear()+"-"+monName[d.getMonth()]+"-"+dayName[d.getDate()+2];
    document.getElementById("newDate").innerHTML = tp;
} 
2
  • Se d.getDate() for dia 30 ou 31, o código falha, pois vai tentar acessar posições que não existem no array dayName. Além disso, tem vários outros casos para se atentar: se a data for no fim do mês, o resultado deve ser no mês seguinte (então não adianta pegar sempre o mesmo mês), e se for no fim de dezembro, o ano também deve mudar. Aritmética de datas é mais complicada do que parece, mas de qualquer forma vc complicou à toa, dê uma olhada aqui e aqui para ver como fazer isso em JavaScript...
    – hkotsubo
    Commented 3/04/2019 às 14:21
  • Lhe dei apenas uma reta meu amigo você aeh já cria suas proprias verificações batata Commented 3/04/2019 às 14:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .