Boostrap v4.6 hide nav-pills until certain time of day, then hide again JS

Question

I have two nav-pills that I need to hide until a certain time of the day and then hide again at a later time of the same day. However there is a third nav-pill which shouldn´t be affected by this and visible at all times.

function showNavPill() {

let now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();

if (date > 15.30 && date < 17.15) {
nav-pill.show = true;
} else {
nav-pill.show = false;
}
}

showNavPill();

I´m quite new to this so not sure if this makes any sense?

Answer 1

In your example you compare a undefined variable date with two float values 15.30 and 17.15. So let us define date and we will have a chance to get it working.

I simply added const date = hours + (minutes / 100); to convert hours and minutes into a float value that may match your conditions.

function showNavPill() {

    let now = new Date();
    let hours = now.getHours();
    let minutes = now.getMinutes();

    const date = hours + (minutes / 100);

    if (date > 15.30 && date < 17.15) {
        nav-pill.show = true;
    } else {
        nav-pill.show = false;
    }
}

showNavPill();

As a result nav-pill.show will be true between 15:31:00 and 17:14:59 (local time!) of your visitor.

But please make yourself aware that nav-pill is not a valid name for a variable in javascript!