Simple javascript conditions

Question

I have a simple javascript conditions. I'm new to javascript, so I'm struggling a lot to solve this. Would be greatful if anyone can help me figuring this out.

I want to display a div in specific time period. In all other cases the div should not be visible.

 var currentdate = new Date(); var d1=new Date("2021-05-18, 02:35:00"); var d2=new Date("2021-05-18, 02:36:00"); if((currentdate>=d1)&&(currentdate<=d2)) { document.getElementById("timer").style.display = "block"; } else { document.getElementById("timer").style.display = "none"; }

 #timer{ width:100px; height:100px; background:#ff934f; }

 <div id="timer"></div>

Answer 1

You should learn how to debug your code. Either by adding "debugging;" to your code, or by adding breakpoints in the console (opens by pressing F12).

I will try to print console.log(1 < currentdate); and console.log(d1 < currentdate) . One of them should return true , right?

 var currentdate = new Date(); var d1 = new Date("2021-05-18, 02:35:00"); var d2 = new Date("2021-05-18, 02:36:00"); console.log(d1 < currentdate); // false console.log(d1 > currentdate); // false if ((currentdate >= d1) && (currentdate <= d2)) { document.getElementById("timer").style.display = "block"; } else { document.getElementById("timer").style.display = "none"; }

 #timer { width: 100px; height: 100px; background: #ff934f; }

 <div id="timer"></div>

No, both return false. Why?

Lets print the d1 date variable.

 var currentdate = new Date(); var d1 = new Date("2021-05-18, 02:35:00"); var d2 = new Date("2021-05-18, 02:36:00"); console.log("d1", d1); // null if ((currentdate >= d1) && (currentdate <= d2)) { document.getElementById("timer").style.display = "block"; } else { document.getElementById("timer").style.display = "none"; }

 #timer { width: 100px; height: 100px; background: #ff934f; }

 <div id="timer"></div>

It outputs null , so the declaration to create that date is wrong. In order to create a date from a string, you can use Date.parse() . But that will also result in null, because you need to remove the comma from the date string: 2021-05-18 02:35:00 (no comma between date and time).

 var currentdate = new Date(); var d1 = Date.parse("2021-05-18 02:35:00"); var d2 = Date.parse("2021-05-18 02:36:00"); console.log("d1", d1); // 1621298100000 console.log("currentdate is newer:", currentdate > d1) // true console.log("currentdate is older:", currentdate < d1) // false if ((currentdate >= d1) && (currentdate <= d2)) { document.getElementById("timer").style.display = "block"; } else { document.getElementById("timer").style.display = "none"; }

 #timer { width: 100px; height: 100px; background: #ff934f; }

 <div id="timer"></div>

Would it result in the same thing if we just removed the comma from `new Date("2021-05-18, 02:35:00")?

 var currentdate = new Date(); var d1 = new Date("2021-05-18 02:35:00"); var d2 = new Date("2021-05-18 02:36:00"); console.log("d1", d1); // 2021-05-18T00:35:00.000Z console.log("currentdate is newer:", currentdate > d1) // true console.log("currentdate is older:", currentdate < d1) // false if ((currentdate >= d1) && (currentdate <= d2)) { document.getElementById("timer").style.display = "block"; } else { document.getElementById("timer").style.display = "none"; }

 #timer { width: 100px; height: 100px; background: #ff934f; }

 <div id="timer"></div>

Answer 2

Try this perhaps? That way you'll have everything as unix timestamps.

var currentdate = Date.now();
var d1 = new Date("2021-05-18, 02:35:00").getTime();
var d2 = new Date("2021-05-18, 02:36:00").getTime();