user image

Great Coder
Published in : 2022-02-13

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

Javascript

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.
 

Comments

Mohamed Aboelfotoh Date : 2022-02-13

Best answers

4

Best answers

4

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();}

 

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

Method refactoring to avoid to many npe checks
Publish date: 2022-03-05 | Comments: 0

Tag: Javascript

What is the use of package-lock JSON file?
Publish date: 2022-02-11 | Comments: 3

Tag: Javascript

Check if div have touch another div
Publish date: 2022-03-02 | Comments: 1

Tag: Javascript

How select specific tag in jQuery using if else statement?
Publish date: 2022-02-27 | Comments: 1

Tag: Javascript

Can we add a javascript or jQuery to the URL?
Publish date: 2022-03-05 | Comments: 2

Tag: Javascript

Adding an id number at the first index to an array of objects
Publish date: 2022-02-13 | Comments: 1

Tag: Javascript