Business Hours

Display Open/Close based on the current day and highlights the respective row. Refer to Saturday's business hours for setting minutes at the half hour mark.

by trmurphy

HTML

<table id="hours-table" class="table table-condensed table-responsive">
    <tr id="weekday-row">
        <td>Monday - Friday:</td>
        <td>8:00am - 5:00pm</td>
        <td><span id="weekday-open"></span>
        </td>
    </tr>
    <tr id="saturday-row">
        <td>Saturday:</td>
        <td>8:30am - 12:00pm</td>
        <td><span id="saturday-open"></span>
        </td>
    </tr>
    <tr id="sunday-row">
        <td>Sunday:</td>
        <td id="sunday-closed">Closed</td>
        <td></td>
    </tr>
</table>

CSS

/*Highlights a table row blue based on day of week */
 .row-blue {
    color: #fff;
    background-color: #000033;
}

JavaScript

showWeekdayHours();
showSaturdayHours();
showSundayHours();

//Business Hours: M-F, 8am-5pm
function showWeekdayHours() {
    var today = new Date();
    var weekday = today.getDay();
    var hour = today.getHours();

    if (weekday <= 5 && weekday >= 1) {
        $('#weekday-row').addClass('row-blue'); //highlight table row if current day is M-F.
        if (hour < 17 && hour >= 8) {
            document.getElementById('weekday-open').innerHTML = 'Open';
        } else {
            document.getElementById('weekday-open').innerHTML = 'Closed';
        }
    }
}

//Business Hours: Saturday 8:30am-12pm; highlight Saturday table row.
function showSaturdayHours() {
    var today = new Date();
    var weekday = today.getDay();
    var saturdayOpen = new Date();
    saturdayOpen.setHours(8, 30, 0);
    var saturdayClose = new Date();
    saturdayClose.setHours(12, 0, 0);

    if (weekday == 6) {
        $('#saturday-row').addClass('row-blue'); //highlight table row if current day is Saturday.
        if (today >= saturdayOpen && today < saturdayClose) {
            document.getElementById('saturday-open').innerHTML = 'Open';
        } else {
            document.getElementById('saturday-open').innerHTML = 'Closed';
        }
    }
}

//Business Hours: Closed Sunday
function showSundayHours() {
    var today = new Date();
    var weekday = today.getDay();

    if (weekday === 0) {
        $('#saturday-row').addClass('row-blue'); //highlight table row if current day is Sunday.
        document.getElementById('sunday-closed').innerHTML = 'Closed';
    }
}