Generați dinamic un meniu derulant de selectare a timpului cu intervale (Javascript sau jQuery)

Generator dinamic HTML elemente bazate pe intrarea utilizatorului sau condiții specifice este o cerință comună în dezvoltarea web. Un astfel de scenariu este crearea meniurilor derulante de timp care își ajustează opțiunile în funcție de ora curentă, intervalul dorit și intervalele. Acest articol prezintă o soluție JavaScript sau jQuery pentru crearea de mențiuni dinamice de timp într-un select element de formă.

De ce dropdownuri dinamice de timp?

Mențiunile derulante dinamice ale timpului sunt utile în multe situații:

• Programarea intalnirilor: Permiteți utilizatorilor să selecteze intervale de timp care se ajustează în funcție de disponibilitatea în timp real.
• Servicii de rezervare: Oferiți opțiuni de timp pentru serviciile oferite numai în anumite ore sau la anumite intervale.
• Setarea mementourilor: Permiteți utilizatorilor să seteze mementouri cu opțiuni flexibile de timp, începând de la ora curentă sau într-un interval specific.
• Experiență îmbunătățită a utilizatorului: Oferiți utilizatorilor opțiuni relevante de timp, evitând derularea și confuzia inutile.

Soluție dinamică de timp folosind JavaScript

Soluția JavaScript de mai jos vă permite să creați meniuri derulante dinamice de timp pe paginile dvs. web. Aceste meniuri se adaptează la diferite scenarii și oferă utilizatorilor opțiuni relevante de timp.

Iată ce oferă:

• Interval de timp flexibil: Definiți orele de început și de sfârșit pentru opțiunile derulante. Puteți chiar să utilizați ora curentă pentru a începe sau a încheia în mod dinamic opțiunile la ora curentă.
• Intervale personalizabile: Setați intervalele dintre opțiunile de timp, fie la fiecare 15 minute, 30 de minute sau orice altă durată.
• Formate de afișare variate: Controlați modul în care este afișată ora, alegând între formatele de 12 ore sau 24 de ore cu indicatoare AM/PM, după cum este necesar.
• Începe de acum: Configurați meniul derulant pentru a începe cu ora curentă, făcându-l ideal pentru scenarii de programare sau rezervare.
• Acoperire pe tot parcursul zilei: Dacă nu este furnizat un interval de timp specific, meniul drop-down va oferi implicit opțiuni pentru întreaga zi.
• Manipulare inteligentă a golurilor: Dacă nu pot fi generate opțiuni de timp valide pe baza parametrilor dați, meniul drop-down va fi dezactivat automat pentru a preveni confuzia utilizatorilor.

Această soluție îmbunătățește experiența utilizatorului prin prezentarea doar a opțiunilor relevante de timp, eliminând derularea inutilă și făcând interacțiunile mai fluide. Indiferent dacă construiți o aplicație de programare, un sistem de rezervare sau orice altă caracteristică care necesită selectarea timpului, acest cod JavaScript oferă flexibilitatea și controlul de care aveți nevoie.

Exemple de timp dinamic

• Exemplul 1: zi întreagă, intervale de 30 de minute, format de 24 de ore

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

• Exemplu 2: Începe de acum, se încheie la 8:15, intervale de 12 minute, format de XNUMX ore

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

• Exemplu 3: Începe la 10:1, se termină acum, intervale de 24 oră, format de XNUMX de ore

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

• Exemplu 5: Începeți acum până înainte de miezul nopții cu intervale de 30 de minute

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

Dynamic Time JavaScript

Iată codul JavaScript complet pentru crearea meniurilor derulante dinamice de timp:

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); 
});

Defalcarea Codului

Acum, să defalcăm codul pentru cititorii noștri:

1. Structura HTML:

• Noi folosim <select> elemente cu clasa timeSelect pentru a crea meniurile drop-down.
• Fiecare select are atribute de date:
  • data-from: Ora de începere (sau „acum”).
  • data-to: Ora de sfârșit (sau „acum”).
  • data-interval: Intervalul în minute.
  • data-start-now: Dacă se începe de la ora curentă.
  • data-format: format de timp (de exemplu, „H:i”, „h:i A”).

2. Funcții JavaScript:

• getTime(from, to, interval, startNow, format, timeSelect):
  • Această funcție face sarcini grele. Preia parametrii din atributele de date și din select elementul în sine.
  • Acesta calculează intervalul de timp pe baza from și to, considerând startNow opțiunea și ora curentă.
  • Acesta generează opțiunile de timp cu cele specificate interval.
  • Formatează valorile timpului folosind formatDate() Funcția.
  • Ea populează dat select element cu opțiunile generate.
  • Acesta dezactivează select dacă nu există opțiuni valide.
• formatDate(date, format):
  • Această funcție de ajutor formatează obiectul dată în funcție de șirul de format furnizat, similar cu formatarea datei PHP.

3. Inițializare:

• Codul selectează toate elementele cu clasa timeSelect folosind querySelectorAll().
• Apoi trece prin fiecare select element folosind forEach().
• Pentru fiecare select, preia parametrii din atributele datelor.
• Se numeste getTime() funcţionează cu parametrii şi select element pentru a genera și a popula opțiunile.

Dynamic Time jQuery

Dacă utilizați jQuery, iată soluția rescrisă.

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); 
  });
});

Această abordare permite mai multe meniuri derulante de timp pe aceeași pagină, fiecare cu configurația și comportamentul său. Codul gestionează diverse scenarii, inclusiv selecții pentru o zi întreagă, începând de la ora curentă și diferite formate de timp, oferind o soluție flexibilă și ușor de utilizat pentru selecția dinamică a orei.

Legate de Martech Zone Conţinut

Viitorul marketingului: o foaie de parcurs pentru orchestrarea experienței clienților bazată pe inteligență artificială

Înțelegerea generației cererii vs a generației de clienți potențiali

Cât este ceasul? Cum afișează, calculează, formatează și sincronizează sistemele noastre datele și orele

Software de generare de clienți potențiali B2B: caracteristici, beneficii și bune practici