How to toggle ( show and hide ) divs according to day hours?

I'm attempting to display and hide divs based on the store opening hours.

The heading "Our store is open" appears in the div.open, whereas the heading "Our shop is closed" appears in the div.closed.

The following are the store's hours of operation:

Monday: 9:00 a.m. to 12:00 p.m. and 14:00 a.m. to 18:00 p.m.

Tuesday: 8:30 a.m. to 12:00 p.m. and 13:30 p.m. to 18:00 p.m.

Wednesday: 9:00 a.m. to 12:00 p.m. and 14:30 a.m. to 18:00 p.m.

Thursday: 9:00 a.m. to 12:00 p.m. and 14:00 a.m. to 18:00 p.m.

Friday: 9:00 a.m. to 12:00 p.m. and 14:30 a.m. to 18:00 p.m.

08:00-11:30 a.m. on Saturday

Closed on Sunday

Germany (UTC+1) is the time zone.

As a result, throughout the hours of operation, the div with the class

open should be visible and the other div with the class close is hidden

And exactly the opposite should happen during the closing hours.

Mohamed Aboelfotoh

13 Feb 2022

Best Answer

You can use the following code snippet.

What this piece of code does is:

Sets opening time.
Sets closing time.
Checks if the current time is between those two times or not.

let Now = new Date(),
 CurrentDay = Now.getDay(),
 OpeningTime = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 8, 30),
 ClosingTime = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 17, 30),
 Open = (Now.getTime() > OpeningTime.getTime() && Now.getTime() < ClosingTime.getTime());

if (CurrentDay !== 6 && CurrentDay !== 0 && Open) {
 $('.openstatus').toggle();
}

How to toggle ( show and hide ) divs according to day hours?

Comments