Search code examples
javascripthtmljquerytimetiming

Grabbing Minutes + Hours for Opening / Closing Times


I have some code set up to display a different message based on the opening / closing time. It works great, but the issue is the opening hours are 7:30am not just 7am. I have tried adding getMinutes (thehours < 7 + getMinutes <= 30) but it doesn't seem to work.

let date = new Date();
let dayOfWeekNumber = date.getDay();
let nameOfDay;
let quote;
let thehours = date.getHours();
let theminutes = date.getMinutes();

switch(dayOfWeekNumber){
    case 0: 
        nameOfDay = 'Sunday';
        if (thehours >= 0 && thehours < 7) {
            quote = 'Closed Today - Opens Monday at 7:30am';
        }
        break;
    case 1:
        nameOfDay = 'Monday';
        if (thehours >= 0 && thehours < 7) {
                quote = 'Closed Now - Opens at 7:30am';

            } else if (thehours >= 7 && thehours < 18) {
                quote = 'Open Now - Closes at 6pm';

            } else if (thehours >= 18 && thehours < 23) {
                quote = 'Closed Now - Opens tomorrow at 7:30am';
            }
        break;
    case 2:
        nameOfDay = 'Tuesday';
        if (thehours >= 0 && thehours < 8) {
                quote = 'Closed Now - Opens at 7:30am';

            } else if (thehours >= 8 && thehours < 18) {
                quote = 'Open Now - Closes at 6pm';

            } else if (thehours >= 18 && thehours < 23) {
                quote = 'Closed Now - Opens tomorrow at 7:30am';
            }
        break;
    case 3:
        nameOfDay = 'Wednesday';
        if (thehours >= 0 && thehours < 8) {
                quote = 'Closed Now - Opens at 7:30am';

            } else if (thehours >= 8 && thehours < 18) {
                quote = 'Open Now - Closes at 6pm';

            } else if (thehours >= 18 && thehours < 23) {
                quote = 'Closed Now - Opens tomorrow at 7:30am';
            }
        break;
    case 4:
        nameOfDay = 'Thursday';
        if (thehours >= 0 && thehours < 8) {
                quote = 'Closed Now - Opens at 7:30am';

            } else if (thehours >= 8 && thehours < 18) {
                quote = 'Open Now - Closes at 6pm';

            } else if (thehours >= 18 && thehours < 23) {
                quote = 'Closed Now - Opens tomorrow at 7:30am';
            }
        break;
    case 5:
        nameOfDay = 'Friday';
            if (thehours >= 0 && thehours < 8) {
                quote = 'Closed Now - Opens at 7:30am';

            } else if (thehours >= 8 && thehours < 18) {
                quote = 'Open Now - Closes at 6pm';

            } else if (thehours >= 18 && thehours < 23) {
                quote = 'Closed Now - Opens tomorrow at 7:30am';
            }
        break;
    case 6:
        nameOfDay = 'Saturday';
        if (thehours >= 0 && thehours < 7) {
            quote = 'Closed Now - Opens at 7:30am';
        } else if (thehours >= 7 && thehours < 12) {
                quote = 'Open Now - Closes at Noon';
        } else if (thehours >= 12 && thehours < 23) {
                quote = 'Closed Now - Opens at 7:30am Monday';
        }
        break;

}

    jQuery('.openingCincinnati').append(quote);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<h2>Cincinnati, Ohio</h2>
<div class="openingCincinnati"></div>
</div>

So - the question. How do I display the text using half hours?


Solution

  • This can be vastly simplified and you can just set up the time of opening and closing

    We would need a timezone too if you want to service other timezones but that is more code.

    const getQuote = () => {
      let now       = new Date();
      let year      = now.getFullYear();
      let month     = now.getMonth();
      let date      = now.getDate();
      let dayNumber = now.getDay();
      let opening   = new Date(year, month, date, 7, 30, 0, 0).getTime();
      let closing   = new Date(year, month, date, 18, 0, 0, 0).getTime();
      let saturday  = dayNumber === 6;
      let sunday    = dayNumber === 0;
      let open      = !sunday && now.getTime() >= opening && now.getTime() < closing;
      if (open) return 'Open Now - Closes at 6pm';
      return `Closed ${sunday ? "Today" : "Now"} - Opens ${saturday || sunday ? "Monday" : "Tomorrow"} at 7:30am`;
    }
    
    $('.openingCincinnati').append(getQuote());
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div>
      <h2>Cincinnati, Ohio</h2>
      <div class="openingCincinnati"></div>
    </div>