2012-01-18 13 views
5

No soy muy bueno en Javascript. Manipulación del tiempo.Javascript Dynamic Time Drop Down

Esto es lo que trato de hacer: tengo una IU que necesita una lista desplegable de tiempo de finalización. Es un conjunto finito de tiempos, esencialmente de 7:00 a.m. a 10:00 p.m. en incrementos de 15 minutos. Estoy usando jQuery y desea crear sobre la marcha Seleccionar un cuadro que tiene este aspecto:

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

Alguien sabe cómo hacer esto en Javascript/jQuery. Quiero hacer algo dinámico como éste:

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

acabamos de una variable para la hora y una variable para el minuto. Incremente la variable de minuto en 15 minutos e incremente la variable de la hora si la variable de minuto supera los 60. Lo más probable es que sea menos eficiente y tenga menos sobrecarga que usar una fecha. – Hello71

Respuesta

18

El siguiente fragmento debería ayudarle a obtener la idea:

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

¡Eso me puso en marcha! ¡¡Gracias!! – Matt