How to Hide Buttons or Website Elements during Certain Times or Days using Javascript

How to Hide Buttons or Website Elements during Certain Times or Days using Javascript

share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on tumblr
Share on email
Share on whatsapp

We recently had cause to investigate whether a website button (to book a restaurant table) could be deactivated outwith the businesses opening hours, to prevent someone trying to book before they open, and then arriving as they open.

We opted to leave the button in place as opposed to hiding it, because on a failed attempt to activate the button, we can still deliver an alert that encourages the customers return – which we felt was better than a) hiding the button ouwith business hours, or b) just deactivating it without explanation.

The problem: the button currently held a class that was used as a pop-up trigger, so in leaving the button in place we had to ‘disable’ it to prevent the popup opening. Unfortunately, when disabling a button not even Javascript events fire, so we were left with a button that didn’t work (which was what we wanted) but which couldn’t fire an alert to the user. We got around this very simply by adding/removing classes to the button wrapper which worked along with a click function to show the alert depending on whether the class was present.

Lastly, we had to do this only during a certain time frame – we ultimately ended up working with UTC time format to create a time variable based on the hour element of the time at the time of the website load and passing this into a conditional to establish if the number of hours fell within, or outwith, 0 to 17 hours i.e. midnight to 5pm.

The solution overall was incredibly simple so i thought I’d post it here incase it benefits other designers/developers with a ‘quick fix’ or if you are a business owner, have you ever want to limit some website function to certain times or days of the week (days of the week are also possible with a little work-around!)

Thanks, Dan.

(function($) {
$(function() {
    var now = new Date();
    var UTC_hours = new Date().getUTCHours() +1;
    $button = $('class or id of your element');
    $buttonwrap = $('class or id of your wrapper element');

    if ((UTC_hours >= 0 && UTC_hours < 17)) {
        $button.prop( "disabled", true );
        $buttonwrap.addClass('alert-message');
    } else {
        $button.prop( "disabled", false );
        $buttonwrap.removeClass('alert-message');
    }

    $buttonwrap.click(function() {
        if ($buttonwrap.hasClass('alert-message')) {
            alert('Sorry you cannot book a table just now, try again during our opening hours.')
            return;
        }
    });
})

})( jQuery );

this post was written by...

Dan @ hi.create

Dan @ hi.create

Dan is the top geek at hi.create - leading the fight against drab websites and ineffective design & marketing. Dan is a multi-disciplinary designer/developer with a passion for art, photography and all things 'code'. You'll most often find him reading about emerging development trends or snapping photos, or generally anywhere in between...so long as it's digital.

don't be shy, say hi.

Scroll to Top

We use a few cookies on this website, we hope that's ok with you?

Website Cookie Image

We use a few cookies on this website, we hope that's ok with you?

Website Cookie Image
Website Cookie Image

We use a few cookies on this website, we hope that's ok with you?