How to display the current date while loading the page

Asked

Viewed 53 times

1

I’m willing to display the current date on a particular div while loading the page, I have already made a working sketch of the code, but I am using the button. I followed the code:

function formataData(data = new Date()){
   var dia = data.getDate(); 
   var mes = data.getMonth()+1;
   var ano = data.getFullYear();

   if(dia.toString().length == 1) dia = '0'+dia;
   if(mes.toString().length == 1) mes = '0'+mes;

      return dia+'/'+mes+'/'+ano;
} 
    
document.getElementById("btnData").addEventListener("click", function myFunction() {
   document.getElementById("localData").innerHTML = formataData()
});
<p>Exibindo data atual.</p>

<button id="btnData">Exibir Data >></button>

<div id="localData" style="width: 100px; height: 50px; border: 1px solid #000;"></div>

javascript front-end dom back-end

  • I could trade this function for a simple new Date().toLocaleDateString()

3 answers

1


Just you put the event onload function and remove the event onclick button. 

function formataData(data = new Date()){
   var dia = data.getDate(); 
   var mes = data.getMonth()+1;
   var ano = data.getFullYear();

   if(dia.toString().length == 1) dia = '0'+dia;
   if(mes.toString().length == 1) mes = '0'+mes;

      return dia+'/'+mes+'/'+ano;
} 

window.onload = function(){
   document.getElementById("localData").innerHTML = formataData();
};
<p>Exibindo data atual.</p>

<div id="localData" style="width: 100px; height: 50px; border: 1px solid #000;"></div>

  • Thanks, that’s just what I needed!

  • Legal Luckas, can mark the answer as accepted to close it on the site?

  • Yes, you can! I would score as useful, but I don’t have enough score for such

  • Opa Luckas is on the button that looks like a V below the sign down, below the 0 :)

1

Easy to set up script

With this script you can set the month in the way you like best (Jan, January etc).

window.onload = function(){
    var d=new Date();
    var mes=new Array("01","02","03","04","05","06","07","08","09","10","11","12");
    var DataHoje = d.getDate() + "/" + mes[d.getMonth()] + "/" + d.getFullYear();
    document.getElementById("DataAtual").innerHTML = DataHoje;
}
<div id="DataAtual"></div>

If you want to put the name of the day of the week (Monday, Monday, etc.)

var d=new Date();
var dia_semana=new Array("Domingo","Segunda","Terça","Quarta","Quinta","Sexta","Sabado");
var mes=new Array("01","02","03","04","05","06","07","08","09","10","11","12");
var HOJE = dia_semana[d.getDay()] + ", " + d.getDate() + "/" + mes[d.getMonth()] + "/" + d.getFullYear();
document.getElementById("DataAtual").innerHTML = HOJE;
<div id="DataAtual"></div>

  • Good Leo, really it is practical and easy to set up as mentioned.

0

Put an onload on <body>

See the code below

<!DOCTYPE html>
<html>
<body onload="mostrarHora()">


 <p>Exibindo data atual.</p>



    <div id="localData" style="width: 100px; height: 50px; border: 1px solid #000;"></div>

<script>
    function formataData(data = new Date()){
        var dia = data.getDate(); 
        var mes = data.getMonth()+1;
        var ano = data.getFullYear();

        if(dia.toString().length == 1) dia = '0'+dia;
        if(mes.toString().length == 1) mes = '0'+mes;

    return dia+'/'+mes+'/'+ano;
    } 


    function mostrarHora() {
    document.getElementById("localData").innerHTML = formataData()};
    </script>


</body>
</html>

  • Thanks man, but it’s not to show the time, but it would also serve!

Browser other questions tagged javascript front-end dom back-end

You are not signed in. Login or sign up in order to post.