CODEWITHSUNDEEP
javascriptjquerycsshidevisibility
Vincenz Brandl
Vincenz Brandl

Reputation: 11

Show/Hide divs based on Time/Opening Hours

I am trying to show/hide divs based on opening hours.

The div .open contains the headline "Our store is open" and the other div .close contains the headline "Our store is close".

The store has the following opening hours:

Monday: 09:00-12:00 & 14:00-18:00

Tuesday: 08:30-12:00 & 13:30-18:00

Wednesday: 09:00-12:00 & 14:30-18:00

Thursday: 09:00-12:00 & 14:00-18:00

Friday: 09:00-12:00 & 14:30-18:00

Saturday: 08:00-11:30

Sunday: Closed

The timezone is Germany (UTC+1).

So during the opening hours the div with the class .open should be displayed and the other div with the class .close should be hidden.

During the closed times the div with the class .close should be displayed and the div with the class .open should be hidden.

I also tried to add special days when the store is closed for a whole day. E.g. December 24 & December 26.

I have tried so much but always failed, I hope someone can help me with this. Really appreciate any comment on this as i search for a solution for hours now.

I have tried the following Code (it works, but only with start & end time – I have not managed to get the breaks in each day. Likewise, I didn't manage to decline the special days (December 24 & 26) as closed):

var openHours = [
    {
        openHour: -1,
        openMinute: -1,
        closeHour: -1,
        closeMinute: -1,
    },
    {
        openHour: 9,
        openMinute: 00,
        closeHour: 18,
        closeMinute: 00,
    },
    {
        openHour: 8,
        openMinute: 30,
        closeHour: 18,
        closeMinute: 00,
    },
    {
        openHour: 9,
        openMinute: 00,
        closeHour: 18,
        closeMinute: 00,
    },
    {
        openHour: 9,
        openMinute: 00,
        closeHour: 18,
        closeMinute: 00,
    },
    {
        openHour: 9,
        openMinute: 00,
        closeHour: 18,
        closeMinute: 00,
    },
    {
        openHour: 8,
        openMinute: 00,
        closeHour: 11,
        closeMinute: 30,
    }
];

var d = new Date();
var dayOfWeek = d.getDay();
var hour = d.getHours();
var mins = d.getMinutes();
var open = true;
var todayHours = openHours[dayOfWeek];

if (hour >= todayHours.openHour && hour <= todayHours.closeHour) {
    if ((hour==todayHours.openHour && mins < todayHours.openMinute) || (hour==todayHours.closeHour && mins > todayHours.closeMinute)) {
        open = false;
    } else {
        open = true;
    }
} else {
    open = false;
}

if (open) {
    $('.open').show();
    $('.close').hide();
} else {
    $('.open').hide();
    $('.close').show();
}

Upvotes: 0

Views: 669

Answers (1)

Apollo79
Apollo79

Reputation: 704

I think, your code should work... The following works for me:

const openHours = [{
    openHour: -1,
    openMinute: -1,
    closeHour: -1,
    closeMinute: -1,
  },
  {
    openHour: 9,
    openMinute: 00,
    closeHour: 18,
    closeMinute: 00,
  },
  {
    openHour: 8,
    openMinute: 30,
    closeHour: 18,
    closeMinute: 00,
  },
  {
    openHour: 9,
    openMinute: 00,
    closeHour: 18,
    closeMinute: 00,
  },
  {
    openHour: 9,
    openMinute: 00,
    closeHour: 18,
    closeMinute: 00,
  },
  {
    openHour: 9,
    openMinute: 00,
    closeHour: 18,
    closeMinute: 00,
  },
  {
    openHour: 8,
    openMinute: 00,
    closeHour: 11,
    closeMinute: 30,
  }
];

const d = new Date("February 14, 2022 18:00:00");
const dayOfWeek = d.getDay();
const hour = d.getHours();
const mins = d.getMinutes();
const todayHours = openHours[dayOfWeek];

let open = true;

if (hour >= todayHours.openHour && hour <= todayHours.closeHour) {
  if ((hour == todayHours.openHour && mins < todayHours.openMinute) || (hour == todayHours.closeHour && mins > todayHours.closeMinute)) {
    open = false;
  } else {
    open = true;
  }
} else {
  open = false;
}

if (open) {
  document.querySelector(".isopen.close").classList.add("hide");
} else {
  document.querySelector(".isopen.open").classList.add("hide");
}
div.isopen {
  color: white;
  font-size: 2rem;
  width: max-content;
  padding: 1rem;
  margin: auto;
  height: 3rem;
  text-align: center;
}

div.isopen.open {
  background-color: green;
}

div.isopen.close {
  background-color: red;
}

div.isopen.hide {
  display: none;
}
<div class="isopen open">Open</div>
<div class="isopen close">Closed</div>

Upvotes: 0

Related Questions