Does Javascript not work in Safari/Edge?

Asked

Viewed 381 times

2

I recently asked for guidance here at ONLY requesting help to make a chronometer via Javascript.

While accessing in other browser (Edge and Safari(Windows and Mac version)) I saw that it keeps appearing this way:

inserir a descrição da imagem aqui

And accessing in other Browser, loads normally:

inserir a descrição da imagem aqui

My doubt is there is some special treatment for the Broser to "understand" Javascript ?

function Cronometro(dtFinal, ciclo) {
   var d, m, a;
   var dtF = dtFinal.replace("/", " ").replace("/", " ");
   dtF = dtF.split(" ");
   d = dtF[0];
   m = dtF[1];
   a = dtF[2];
   var countDownDate = new Date(m+" "+d+","+a).getTime();

   // Update the count down every 1 second
   var x = setInterval(function () {

       // Get todays date and time
       var now = new Date().getTime();

       // Find the distance between now an the count down date
       var distance = countDownDate - now;

       // Time calculations for days, hours, minutes and seconds
       var days = Math.floor(distance / (1000 * 60 * 60 * 24));
       var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
       var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
       var seconds = Math.floor((distance % (1000 * 60)) / 1000);

       // Output the result in an element with id="demo"

       document.getElementById("demo").innerHTML = "Faltam " + days + " Dias " + hours + " Horas "
           + minutes + " Minutos para o fechamento da Semana " + ciclo;

       //If the count down is over, write some text 
       if (distance < 0) {
           clearInterval(x);
           document.getElementById("demo").innerHTML = "";
       }
   }, 1000);

}
        
Cronometro("30/06/2018", "14/2018");
<div id="demo"></div>

2 answers

7


Browsers have variations on the date formats they can interpret. The code you linked uses the following:

var countDownDate = new Date(m+" "+d+","+a).getTime();

This format is not very usual and does not follow the established standards (a Extended ISO 8601 variation). It can be said that it worked on some browsers by luck. To fix, I suggest using another form of constructor Date, passing year, month and day separately, in this order, instead of string.

var countDownDate = new Date(a, m-1, d).getTime();

Note
MDN documentation states that Date.parse accepts the RFC2822 date format (which is about email message format), i.e., dates like Aug 12, 2018. In fact, Javascript Enginers even accept this format, but it is worth noting that it is not mentioned in the language specification (ECMA-262). The safest thing would be to avoid.

1

Actually these browsers you quoted do not recognize the numeric format of the month on the date, type "06 15, 2018". It would have to be "Jun 15, 2018".

This documentation indicates that the string format is valid:

inserir a descrição da imagem aqui

In this case you can convert the number for the month by abbreviating the month name (e.g.: June = Jun).

You can use an array to pick its name by changing the value of m:

m = meses[parseInt(dtF[1])-1];
// parseInt para retirar o "0" do número do mês (06 => 6)
// o -1 para pegar o elemento no índice correto da array

See working:

Print Edge

inserir a descrição da imagem aqui

Print Safari

inserir a descrição da imagem aqui

var meses = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

function Cronometro(dtFinal, ciclo) {
   var d, m, a;
   var dtF = dtFinal.replace("/", " ").replace("/", " ");
   dtF = dtF.split(" ");
   d = dtF[0];
   m = meses[parseInt(dtF[1])-1];
   a = dtF[2];

   var countDownDate = new Date(m+" "+d+","+a).getTime();

   // Update the count down every 1 second
   var x = setInterval(function () {

       // Get todays date and time
       var now = new Date().getTime();

       // Find the distance between now an the count down date
       var distance = countDownDate - now;

       // Time calculations for days, hours, minutes and seconds
       var days = Math.floor(distance / (1000 * 60 * 60 * 24));
       var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
       var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
       var seconds = Math.floor((distance % (1000 * 60)) / 1000);
       

       // Output the result in an element with id="demo"

       document.getElementById("demo").innerHTML = "Faltam " + days + " Dias " + hours + " Horas "
           + minutes + " Minutos para o fechamento da Semana " + ciclo;

       //If the count down is over, write some text 
       if (distance < 0) {
           clearInterval(x);
           document.getElementById("demo").innerHTML = "";
       }
   }, 1000);

}
        
Cronometro("15/06/2018", "14/2018");
<div id="demo"></div>

  • 1

    In fact the documentation puts this as an example of Parsing non-standard date strings. And non-standard is defined as that which does not adhere to the standards I quoted in my reply.

  • It seems that the MDN is based on this. Anyway, browsers accept this format but according to the specification they are not even standards. See the update in my reply. Anyway I don’t understand in your code why turn 15/06/2018 for this format instead of breaking this string and throwing the parts in the constructor as I suggested. It would not be simpler?

  • Yes, your answer is much simpler, for sure.

Browser other questions tagged

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