How to determine if it is day or night in Javascript?

Question

Im wanting to apply different CSS sheets to my site depending on the time of the browser. e.g if its day time, display day.css or night.css for night.

I can do this with PHP but it is based on the server time, not the browsers local time.

Is there a way to tell the time in javascript? I'm probably going to use jQuery to simply initiate the css once its worked out.

Answer 1

var hr = (new Date()).getHours(); //get hours of the day in 24Hr format (0-23)

Depending on your definition of day/night, perform your magic :)

PS: If your day/night starts not at the exact hour, you can try getMinutes().

Answer 2

I use this logic:

const hours = new Date().getHours()
const isDayTime = hours > 6 && hours < 20

Answer 3

(new Date).getHours()

will get the local hour of the time (0-23) of the client. Based on that value, swap the stylesheet for the page. I would set the day stylesheet as the default and swap it out when necessary.

My initial thought is that you would want to perform this operation as soon as possible on the client to avoid any potential browser reflow.

Answer 4

For this to work you’ll need to know the location of the client, the local sunrise and sunset time and the day of the year. Only locations at the equator have an almost constant 12 hour of day light all the year around.

This other answer on StackOverflow provides a good answer:

Calculating sunrise/sunset times in Javascript

Answer 5

Fun question. I wanted to give it a try and come up with something totally different than what was proposed so far. This is what I got:

function isDay() {
    return (Date.now() + 60000 * new Date().getTimezoneOffset() + 21600000) % 86400000 / 3600000 > 12;
}

It will return true if it's between 6 AM and 6 PM, or false otherwise.

Breaking down into parts:

• Date.now() returns UTC epoch in milliseconds;
• new Date().getTimezoneOffset() gets local time zone, in minutes, and 60000 just converts it to milliseconds;
• 21600000 represents 6 hours in milliseconds. This is a hack to pretend each day starts at 6 AM (will be explained in the end);
• 86400000 is how many milliseconds there is in a day, so X % 86400000 will return how many milliseconds have passed since the current day begun; since we added 6 hours in the previous step, this is actually counting millis since 6 AM;
• we divide that result by 3600000 (number of milliseconds in an hour) to find out how many hours have passed since the day begun;
• since we added 6 hours to our clock, 6 AM is now 12 PM, and 6 PM is actually midnight. This is why the function checks to see if the value is greater than 12; if it is, it must be between 6 AM and 6 PM right now. Anything earlier than 6 AM or later than 6 PM becomes less than 12, according to that formula.

Of course, the same can be accomplished with:

function isDay() {
  const hours = (new Date()).getHours();
  return (hours >= 6 && hours < 18);
}

But that is not even half as fun :-D