how to loop through time values in JavaScript?

Question

I have a situation where user pick start, end time and meeting length. Once start time is selected and meeting length I have to loop from START time all the way until 5:00PM with increment of meeting length and output each time slot in END time. I have my code working with Date API in javascript, problem is that my for loop gives me just first value and then stop. I'm not sure what is odd in my code so if anyone can help please let me know. Here is my code:

<tr>
  <th>Start Time:</th>
  <td>
    <select name="stime" id="stime" />
                <option value="">--Select start time--</option>
        </select>
  </td>
  <br />

  <th>Meeting Length:</th>
  <td>
    <select name="meet_leng" id="meet_leng">
            <option value="">--Select length--</option>
        </select>
  </td>
  <br />

  <th>End Time:</th>
  <td>
    <select name="etime" id="etime"/>
            <option value="">--Select end time--</option>
        </select>
  </td>
</tr>

Javascript:

$(function() {
    //This loop create values fro meeting length
    for(var i=5; i <= 60; i+=5){
        $('#meet_leng').append('<option value="'+i+'">'+i+' min'+'</option>')
    }


    for(var i=700; i<= 1700; i+=15){
    var mins = i % 100;
    var hours = parseInt(i/100);

    if (mins > 45) {
        mins = 0;
      hours += 1;
      i = hours * 100;
    }

    var AmPm = " AM";
    //var standardTime = hours > 11 ? ' PM' : ' AM';
    //format hours
    if(hours == 12){
        AmPm = " PM";
    }

        if (hours > 12) {
        hours = hours - 12;
        AmPm = " PM";
        }

    $('#stime').append('<option value="'+('0' + (hours)).slice(-2)+':'+('0' + mins).slice(-2)+AmPm+'">'+('0' + (hours)).slice(-2)+':'+('0' + mins).slice(-2)+AmPm+' </option>')
  }
});

$('#meet_leng').on('change', function() {
    var time1 = new Date();
  var time2 = new Date();
  var add = new Date();

  //meeting length
  var meetingLength = parseInt($('#meet_leng').val());

    //start time 
  var startTime = $('#stime').val();
    var startHour = startTime.split(':')[0];
  var startMin = startTime.split(':')[1].replace(/AM|PM/gi,'');

  //end time
  var endTime = '05:00 PM';
  var endHour = endTime.split(':')[0];
  var endMin = endTime.split(':')[1].replace(/AM|PM/gi,'');

  //Check if start time is PM and adjust hours to military
    if(startTime.indexOf('PM') > -1){
    startHour = parseInt(startHour) + 12;
    console.log(startHour);
    alert(startHour)
  }

  //Check if end time is PM and adjust hours to military
  if(endTime.indexOf('PM') > -1){
    endHour = parseInt(endHour) + 12;
    console.log(endHour);
  }

  //Date API start time
  time1.setHours(parseInt(startHour));
    time1.setMinutes(parseInt(startMin));

  //Date API end time
  time2.setHours(parseInt(endHour));
    time2.setMinutes(parseInt(endMin));

  //Adding meeting length to start time, this value will be use for end    time
  time1.setMinutes(time1.getMinutes() + meetingLength);

  for(var i=time1; i <= time2; i+=meetingLength){
    $('#etime').append('<option value="'+i+'">'+i+'</option>')
  }

});

Here is working example of my code: https://jsfiddle.net/dmilos89/6n458ze9/6/ .

Answer 1

if you replace your for loop with this you will get all the time that end before 17:00

do {
        time1.setMinutes(time1.getMinutes() + meetingLength);
        $('#etime').append('<option value="' + time1 + '">' + time1 + '</option>');
      } while (time1 < time2)

or

time1.setMinutes(time1.getMinutes() + meetingLength);

while (time1 < time2){
    $('#etime').append('<option value="' + time1 + '">' + time1 + '</option>');
    time1.setMinutes(time1.getMinutes() + meetingLength);
{

either is valid but the second one will also filter out any meeting that will instantly over run 17:00

the += in the for loop just adds the meeting length to the end of the string representation.