2012-01-18 2 views
5

Je ne suis pas très bon en Javascript manipulation du temps.Javascript Temps dynamique Drop Down

Voici ce que j'essaie de faire: J'ai une interface utilisateur qui a besoin d'une liste déroulante de temps de la fin. C'est un ensemble limité de temps, essentiellement de 7h00 à 22h00 par incréments de 15 minutes. J'utilise jQuery et que vous voulez créer à la volée une Select boîte qui ressemble à ceci:

<select> 
<option value="420">7:00 AM</option> 
<option value="435">7:15 AM</option> 
<option value="450">7:30 AM</option> 
etc... 
</select> 

Quelqu'un sait comment faire en javascript/jQuery. Je veux faire quelque chose de dynamique comme ceci:

for(int i = 420; i<=1320; i+=15){ 
//use value of i to increment a date or something and create an option for the drop down... this is where I am stuck 
} 
+0

tout simplement avoir une variable pour l'heure et une variable pour la minute. Incrémenter la variable minute de 15 minutes et incrémenter la variable heure si la variable minute dépasse 60. Elle sera probablement moins efficace et aura moins de frais généraux que l'utilisation d'une date. – Hello71

Répondre

18

L'extrait suivant devrait vous aider à obtenir l'idée:

function populate(selector) { 
    var select = $(selector); 
    var hours, minutes, ampm; 
    for(var i = 420; i <= 1320; i += 15){ 
     hours = Math.floor(i/60); 
     minutes = i % 60; 
     if (minutes < 10){ 
      minutes = '0' + minutes; // adding leading zero 
     } 
     ampm = hours % 24 < 12 ? 'AM' : 'PM'; 
     hours = hours % 12; 
     if (hours === 0){ 
      hours = 12; 
     } 
     select.append($('<option></option>') 
      .attr('value', i) 
      .text(hours + ':' + minutes + ' ' + ampm)); 
    } 
} 

populate('#timeSelect'); // use selector for your select 
+0

Ça m'a fait partir! Merci!! – Matt