How to set end time to give me correct intervals?

Question

I'm trying to fix my JQuery timepicker to give me correct end time. My current code works fine just when I pick start time and interval. Example: If I pick 8:00am and pick interval 30min my end time automatically will be 8:30am, but here my problem comes because I want after that when I click on my drop down End Time to see intervals like 8:30am(that I have), 9:00am, 9:30am, ... and so on until 5:00pm that is my last time. Here is my HTML code:

 $(function() {
   for (var i = 5; i <= 60; i += 5) {
     $('#meeting').append('<option value="' + i + '">' + i + '   min' + '</option>');
   }

   function setEndTime() {
     var meetingLength = parseInt($('#meeting').find('option:selected').val() || 0);
     var selectedTime = $('#stime').timepicker('getTime');
     if (selectedTime == null || selectedTime == "") {
       alert("Please select the start time.");
     } else {
       selectedTime.setMinutes(selectedTime.getMinutes() + parseInt(meetingLength, 10), 0);
       $('#etime').timepicker('setTime', selectedTime);
     }
   }

   $('#stime').timepicker({
     'timeFormat': 'h:i a',
     'minTime': '8:00 AM',
     'maxTime': '5:00 PM',
     'step': 30
   }).on(function() {
     setEndTime();
   });

   $('#etime').timepicker({
     'timeFormat': 'h:i a',
     'minTime': '8:00 AM',
     'maxTime': '5:00 PM',
     'step': 5
   });

   $('#meeting').bind('change', function() {
     setEndTime();
   });
 });

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.min.js"></script>

<tr>
  <th>Start Time:</th>
  <td>
    <input type="text" id="stime" name="stime" class="time" />
  </td>
</tr>
<tr>
  <th>Length of meeting:</th>
  <td>
    <select name="meeting" id="meeting">
      <option value="">--Select length--</option>
    </select>
  </td>
</tr>
<tr>
  <th>End Time:</th>
  <td>
    <input type="text" id="etime" name="etime" class="time">
  </td>
</tr>

I'm not sure where my code should be modified to give me end times based on selected interval. If see where is my code breaking please let me know. Thank you.

Answer 1

Change the step property of #etime to be a function (so dynamic value) using the interval:

$('#etime').timepicker({
  'timeFormat': 'h:i a',
  'minTime': '8:00 AM',
  'maxTime': '5:00 PM',
  'step': function(i) {
            return $('#meeting').val() || 5;
          }
});

Runnable example

$(function() {
  for (var i = 5; i <= 60; i += 5) {
    $('#meeting').append('<option value="' + i + '">' + i + '   min' + '</option>');
  }

  function setEndTime() {
    var meetingLength = parseInt($('#meeting').find('option:selected').val() || 0);
    var selectedTime = $('#stime').timepicker('getTime');
    if (selectedTime == null || selectedTime == "") {
      alert("Please select the start time.");
    } else {
      selectedTime.setMinutes(selectedTime.getMinutes() + parseInt(meetingLength, 10), 0);
      $('#etime').timepicker('setTime', selectedTime);
    }
  }

  $('#stime').timepicker({
    'timeFormat': 'h:i a',
    'minTime': '8:00 AM',
    'maxTime': '5:00 PM',
    'step': 30
  }).on(function() {
    setEndTime();
  });

  $('#etime').timepicker({
    'timeFormat': 'h:i a',
    'minTime': '8:00 AM',
    'maxTime': '5:00 PM',
    'step': 5
  });

  $('#meeting').bind('change', function() {
    $('#etime').timepicker('remove');
    $('#etime').timepicker({
      'timeFormat': 'h:i a',
      'minTime': '8:00 AM',
      'maxTime': '5:00 PM',
      'step': $('#meeting').val()
    });
    setEndTime();
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.min.js"></script>

<tr>
  <th>Start Time:</th>
  <td>
    <input type="text" id="stime" name="stime" class="time" />
  </td>
</tr>
<tr>
  <th>Length of meeting:</th>
  <td>
    <select name="meeting" id="meeting">
      <option value="">--Select length--</option>
    </select>
  </td>
</tr>
<tr>
  <th>End Time:</th>
  <td>
    <input type="text" id="etime" name="etime" class="time">
  </td>
</tr>

Edit

Since the picker doesn't refresh when the interval changes, there is a dirty trick to force the refresh, completely remove the picker and recreate it (I edited the above snippet):

$('#etime').timepicker({
  'timeFormat': 'h:i a',
  'minTime': '8:00 AM',
  'maxTime': '5:00 PM',
  'step': 5
});

$('#meeting').bind('change', function() {
  $('#etime').timepicker('remove');
  $('#etime').timepicker({
    'timeFormat': 'h:i a',
    'minTime': '8:00 AM',
    'maxTime': '5:00 PM',
    'step': $('#meeting').val()
  });
  setEndTime();
});