Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Display/hide a div based on the time

I’m currently building a website using Webflow. I need to display a div "We are open" or "We are closed" based on the time slots defined by my client, in order to inform website visitors whether they can call or not. However, it’s not working 100%. For example, at 4:20 PM, it already shows "We are closed" when it should still display "We are open".

Here is the temporary link to the site: https://gaia-reunion.webflow.io/ The div in question is located at the bottom of the page here: https://gaia-reunion.webflow.io/#talk.

So far, I’ve tried this solution:

<script>
// Fonction pour afficher ou masquer les div en fonction de l'heure de l'île de la Réunion
function afficherDivSelonHeure() {
    var date = new Date();
    var options = {timeZone: 'Indian/Reunion'};
    var heureReunion = date.toLocaleTimeString('fr-FR', options); // Récupérer l'heure locale de l'île de la Réunion

    var heure = parseInt(heureReunion.split(':')[0]); // Récupérer seulement l'heure
    var minute = parseInt(heureReunion.split(':')[1]); // Récupérer seulement les minutes

    // Convertir l'heure de l'île de la Réunion en heure UTC pour faciliter la comparaison
    var heureUTC = (heure - 4) % 24; // UTC+4 pour l'île de la Réunion

    // Déterminer le jour de la semaine
    var jour = date.getDay();

    // Vérifier si c'est un jour ouvrable et si l'heure est dans les plages horaires spécifiées
    var plageHoraire1 = (heureUTC >= 8 && heureUTC < 12) || (heureUTC === 12 && minute === 0); // plage horaire du matin
    var plageHoraire2 = (heureUTC >= 13 && heureUTC < 17) || (heureUTC === 17 && minute === 0); // plage horaire de l'après-midi

    var jourOuvrable = false;

    // Déterminer si c'est un jour ouvrable en fonction du jour de la semaine et des plages horaires spécifiées
    switch (jour) {
        case 1: // Lundi
        case 2: // Mardi
        case 3: // Mercredi
        case 4: // Jeudi
            jourOuvrable = plageHoraire1 || plageHoraire2;
            break;
        case 5: // Vendredi
            jourOuvrable = (heureUTC >= 8 && heureUTC < 13) || (heureUTC === 13 && minute === 0); // plage horaire spéciale pour le vendredi
            break;
        default:
            jourOuvrable = false;
    }

    // Sélectionner les divs
    var divOpen = document.getElementById("div-open");
    var divClose = document.getElementById("div-close");

    // Afficher div-open si c'est un jour ouvrable et l'heure est dans les plages horaires spécifiées, sinon afficher div-close
    if (jourOuvrable) {
        divOpen.style.display = "block";
        divClose.style.display = "none";
    } else {
        divOpen.style.display = "none";
        divClose.style.display = "block";
    }
}

// Appeler la fonction une fois au chargement de la page pour afficher les divs correctement
afficherDivSelonHeure();

// Rafraîchir l'affichage toutes les minutes pour prendre en compte les changements d'heure
setInterval(afficherDivSelonHeure, 60000);

</script>

It seems to be working partially, as mentioned earlier. For example, at 4:20 PM, it already displays "We are closed" when it should still display "We are open".

Tags:

2

Answers


  1. 0

    According to your code you’re checking the opening hours against UTC. Also according to your code you’re at a timezone that’s at UTC+4. So at 16:20 your time you’re checking at 12:20 UTC. This would be ‘closed’ with the opening hours of 8:00-12:00 and 13:30-17:00.

    You probably want to do your date checks in local time instead of UTC. Since UTC doesn’t use a daylight saving time either and your local time might.

    Login or Signup to reply.
  2. 0

    In addition to the suggestion of David: When you write code, try to isolate in separate methods. For this particular problem I can imagine you have methods to:

    • return opening hours for a given day
    • creates an instance of Date with given hour and minutes
    • return if given timeslot is currently active
    • check if any of the given timeslots is active

    Without trying to be complete, this could be a solution:

    interface TimeSlot {
    from: string;
    to: string;
}

const getOpeningHours = (): TimeSlot[] => {
    const day = new Date().getDay();

    if (day === 0 || day === 6) {
        return [];
    } else if (day === 5) {
        return [{ from: '8:00', to: '13:00' }];
    }

    return [
        { from: '8:30', to: '12:00' },
        { from: '13:30', to: '17:00' }
    ];
}

const parseTime = (time: string): Date => {
    const parts = time.split(':').map(n => parseInt(n));
    const dateTime = new Date();
    dateTime.setHours(parts[0], parts[1], 0, 0);
    return dateTime;
}

const isWithinTimeslot = (timeslot: TimeSlot): boolean => {
    const now = new Date();
    return now >= parseTime(timeslot.from) && now <= parseTime(timeslot.to);
}

const isOpen = (): boolean => getOpeningHours().some(timeslot => isWithinTimeslot(timeslot));

    If you call isOpen() it should give you correct boolean value in return. Go step by step and when you complete one method think about the next step.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search