Générer dynamiquement une liste déroulante de sélection de temps avec des intervalles (Javascript ou JQuery)

Générer dynamiquement HTML Les éléments basés sur les entrées de l’utilisateur ou sur des conditions spécifiques sont une exigence courante dans le développement Web. L’un de ces scénarios consiste à créer des listes déroulantes de temps qui ajustent leurs options en fonction de l’heure actuelle, de la plage souhaitée et des intervalles. Cet article présente une solution JavaScript ou jQuery pour créer des listes déroulantes de temps dynamiques dans un select élément de formulaire.

Pourquoi des listes déroulantes de temps dynamiques ?

Les listes déroulantes dynamiques de temps sont utiles dans de nombreuses situations :

• Prise de rendez-vous : Permettez aux utilisateurs de sélectionner des plages horaires qui s’ajustent en fonction de la disponibilité en temps réel.
• Prestations de réservation : Proposez des options horaires pour les services proposés uniquement à des heures spécifiques ou à certains intervalles.
• Définir des rappels : Permettez aux utilisateurs de définir des rappels avec des options d’heure flexibles, à partir de l’heure actuelle ou dans une plage spécifique.
• Expérience utilisateur améliorée : Présentez aux utilisateurs des choix de temps pertinents, en évitant les défilements inutiles et la confusion.

Solution de temps dynamique utilisant JavaScript

La solution JavaScript ci-dessous vous permet de créer des menus déroulants temporels dynamiques sur vos pages Web. Ces menus s’adaptent à différents scénarios et offrent aux utilisateurs des choix horaires pertinents.

Voici ce qu’il propose :

• Plages horaires flexibles : Définissez les heures de début et de fin pour les options déroulantes. Vous pouvez même utiliser l’heure actuelle pour démarrer ou terminer dynamiquement les options à l’heure actuelle.
• Intervalles personnalisables : Définissez les intervalles entre les options de temps, que ce soit toutes les 15 minutes, 30 minutes ou toute autre durée.
• Formats d’affichage variés : Contrôlez la façon dont l’heure est affichée, en choisissant entre les formats 12 heures ou 24 heures avec des indicateurs AM/PM selon vos besoins.
• Commencez dès maintenant : Configurez la liste déroulante pour commencer par l’heure actuelle, ce qui la rend idéale pour les scénarios de planification ou de réservation.
• Couverture d’une journée complète : Si aucune plage horaire spécifique n’est fournie, la liste déroulante proposera par défaut des options pour toute la journée.
• Gestion intelligente des vides : Si aucune option de temps valide ne peut être générée sur la base des paramètres donnés, la liste déroulante sera automatiquement désactivée pour éviter toute confusion de l’utilisateur.

Cette solution améliore l’expérience utilisateur en présentant uniquement les choix temporels pertinents, en éliminant le défilement inutile et en rendant les interactions plus fluides. Que vous créiez une application de planification, un système de réservation ou toute autre fonctionnalité nécessitant une sélection d’heure, ce code JavaScript offre la flexibilité et le contrôle dont vous avez besoin.

Exemples de temps dynamique

• Exemple 1 : Journée complète, intervalles de 30 minutes, format 24 heures

<select class="timeSelect" data-from="" data-to="" data-interval="30" data-start-now="false" data-format="H:i"></select>

• Exemple 2 : Commencer à partir de maintenant, terminer à 20 h, intervalles de 15 minutes, format de 12 heures

<select class="timeSelect" data-from="" data-to="" data-interval="30" data-start-now="false" data-format="H:i"></select>

• Exemple 3 : Commencer à 10 heures, Finir à maintenant, intervalles d’une heure, format 24 heures

<select class="timeSelect" data-from="10" data-to="now" data-interval="60" data-start-now="false" data-format="H:i">

• Exemple 4 : Début à 14h, Fin à 18h, intervalles de 10 minutes, format 12 heures avec AM/PM minuscules

<select class="timeSelect" data-from="14" data-to="18" data-interval="10" data-start-now="false" data-format="h:i a"></select>

• Exemple 5 : Commencez maintenant jusqu’à avant minuit avec des intervalles de 30 minutes

<select class="timeSelect" data-from="" data-to="23" data-interval="15" data-start-now="true" data-format="H:i">
</select>

JavaScript temporel dynamique

Voici le code JavaScript complet pour créer des listes déroulantes de temps dynamiques :

function getTime(from, to, interval, startNow, format, timeSelect) { 
  var select="<option value="">Select a Time</option>";
  var now = new Date();
  var currentHour = now.getHours();
  var currentMinute = now.getMinutes();
  var optionsCount = 0; 

  if (from === "now") {
    from = currentHour;
  } else if (from === "") {
    from = 0; 
  } else {
    from = parseInt(from);
  }

  if (to === "now") {
    to = currentHour;
  } else if (to === "") {
    to = 23; 
  } else {
    to = parseInt(to);
  }

  if (startNow) {
    if (from < currentHour) {
      from = currentHour;
    }
    if (to < currentHour) {
      to = currentHour; 
    }
  }

  for (var hour = from; hour <= to; hour++) {
    var hour12 = hour > 12 ? hour - 12 : hour;
    hour12 = hour12 === 0 ? 12 : hour12; // Change 0 to 12 for 12 AM
    var ampm = hour >= 12 ? 'PM' : 'AM';
    for (var min = 0; min < 60; min += interval) {
      if (startNow && hour === currentHour && min < currentMinute) {
        continue;
      }
      var min0 = min < 10 ? '0' + min : min;

      var date = new Date();
      date.setHours(hour);
      date.setMinutes(min);
      var value = formatDate(date, format);

      select += '<option value="' + value + '">' + hour12 + ':' + min0 + ' ' + ampm + '</option>';
      optionsCount++; 
    }
  }

  timeSelect.innerHTML = select;
  if (optionsCount <= 1) { 
    timeSelect.disabled = true;
  }
}

function formatDate(date, format) {
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var ampm = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  minutes = minutes < 10 ? '0'+minutes : minutes;
  var strTime = hours + ':' + minutes + ' ' + ampm;
  return format
    .replace(/H/g, date.getHours())
    .replace(/h/g, hours)
    .replace(/i/g, minutes)
    .replace(/s/g, date.getSeconds())
    .replace(/a/g, ampm.toLowerCase())
    .replace(/A/g, ampm);
}

var timeSelects = document.querySelectorAll('.timeSelect');

timeSelects.forEach(function(timeSelect) {
  var from = timeSelect.dataset.from; 
  var to = timeSelect.dataset.to;     
  var interval = parseInt(timeSelect.dataset.interval);
  var startNow = timeSelect.dataset.startNow === 'true';
  var format = timeSelect.dataset.format;

  getTime(from, to, interval, startNow, format, timeSelect); 
});

Décrypter le code

Maintenant, décomposons le code pour nos lecteurs :

1. Structure HTML :

• Nous utilisons <select> éléments avec la classe timeSelect pour créer les menus déroulants.
• Chaque select a des attributs de données :
  • data-from: L’heure de début (ou « maintenant »).
  • data-to: L’heure de fin (ou « maintenant »).
  • data-interval: L’intervalle en minutes.
  • data-start-now: s’il faut démarrer à partir de l’heure actuelle.
  • data-format: Le format de l’heure (par exemple, « H:i », « h:i A »).

2. Fonctions JavaScript :

• getTime(from, to, interval, startNow, format, timeSelect):
  • Cette fonction fait le gros du travail. Il prend les paramètres des attributs de données et le select élément lui-même.
  • Il calcule la plage de temps en fonction de from et tocompte tenu du startNow option et l’heure actuelle.
  • Il génère les options de temps avec le spécifié interval.
  • Il formate les valeurs de temps en utilisant le formatDate() fonction.
  • Il remplit le donné select élément avec les options générées.
  • Il désactive le select s’il n’y a pas d’options valides.
• formatDate(date, format):
  • Cette fonction d’assistance formate l’objet date selon la chaîne de format fournie, similaire au formatage de date PHP.

3. Initialisation :

• Le code sélectionne tous les éléments avec la classe timeSelect en utilisant querySelectorAll().
• Il parcourt ensuite chacun select élément utilisant forEach().
• Pour chacun selectil récupère les paramètres des attributs de données.
• Il appelle le getTime() fonctionner avec les paramètres et les select élément pour générer et remplir les options.

Temps dynamique jQuery

Si vous utilisez jQuery, voici la solution réécrite.

function getTime(from, to, interval, startNow, format, $timeSelect) {
  var selectOptions="<option value="">Select a Time</option>";
  var now = new Date();
  var currentHour = now.getHours();
  var currentMinute = now.getMinutes();
  var optionsCount = 0; 

  if (from === "now") {
    from = currentHour;
  } else if (from === "") {
    from = 0; 
  } else {
    from = parseInt(from);
  }

  if (to === "now") {
    to = currentHour;
  } else if (to === "") {
    to = 23; 
  } else {
    to = parseInt(to);
  }

  if (startNow) {
    if (from < currentHour) {
      from = currentHour;
    }
    if (to < currentHour) {
      to = currentHour; 
    }
  }

  for (var hour = from; hour <= to; hour++) {
    var hour12 = hour > 12 ? hour - 12 : hour;
    hour12 = hour12 === 0 ? 12 : hour12; 
    var ampm = hour >= 12 ? 'PM' : 'AM';
    for (var min = 0; min < 60; min += interval) {
      if (startNow && hour === currentHour && min < currentMinute) {
        continue;
      }
      var min0 = min < 10 ? '0' + min : min;

      var date = new Date();
      date.setHours(hour);
      date.setMinutes(min);
      var value = formatDate(date, format);

      selectOptions += '<option value="' + value + '">' + hour12 + ':' + min0 + ' ' + ampm + '</option>';
      optionsCount++; 
    }
  }

  $timeSelect.html(selectOptions);
  if (optionsCount <= 1) { 
    $timeSelect.prop('disabled', true);
  }
}

function formatDate(date, format) {
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var ampm = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12;
  hours = hours ? hours : 12; 
  minutes = minutes < 10 ? '0'+minutes : minutes;
  var strTime = hours + ':' + minutes + ' ' + ampm;
  return format
    .replace(/H/g, date.getHours())
    .replace(/h/g, hours)
    .replace(/i/g, minutes)
    .replace(/s/g, date.getSeconds())
    .replace(/a/g, ampm.toLowerCase())
    .replace(/A/g, ampm);
}

$(document).ready(function() {
  $('.timeSelect').each(function() {
    var $timeSelect = $(this);
    var from = $timeSelect.data('from'); 
    var to = $timeSelect.data('to');     
    var interval = parseInt($timeSelect.data('interval'));
    var startNow = $timeSelect.data('start-now') === true;
    var format = $timeSelect.data('format');

    getTime(from, to, interval, startNow, format, $timeSelect); 
  });
});

Cette approche permet plusieurs listes déroulantes temporelles sur la même page, chacune avec sa configuration et son comportement. Le code gère divers scénarios, y compris les sélections d’une journée complète, à partir de l’heure actuelle et de différents formats d’heure, offrant ainsi une solution flexible et conviviale pour la sélection dynamique de l’heure.