CODEWITHSUNDEEP
javascriptjquerydatetime-conversion
espresso_coffee
espresso_coffee

Reputation: 6110

How to get End time based on selected Start time and Interval?

Currently working on a project where I have to build time picker with start, end time and interval of meeting. User first pick start time for example 7:15am, then next step is to pick meeting interval that range from 5 min up to 60 min, and last step is end time that should start based on picked start time and meeting interval. So if user pick 7:30am for start time, and pick meeting interval 50 min, my end time should start at 8:20am, 9:10am, 10:00am,... all the way up to 5pm but not greater than. First problem with my current is Start Time picker, in drop down next to 12 hour value I should have PM. My code gives me AM. Second is End Time works fine if I pick meeting interval from 5 min up to 45 min, but if I pick meeting length 50 min or 55 min I'm not getting correct end time values in drop down.

HTML:

<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" onClick="setEndTime()">
       <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() {
    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 standardTime = ' AM';

        if(hours > 12){
             standardTime = ' PM';
             hours %= 13;
             hours++;
        }else{
             hours %= 13;
        }

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


function setEndTime(){
  var meetingLength = $('#meet_leng').val();
    var selectedTime = $('#stime').val();
    var sum = meetingLength + selectedTime;

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

    if (mins > 59) {
        var new_mins = mins % 60;
      hours += 1;
      i = (hours * 100) + new_mins;
    }

    $('#etime').append('<option value="'+i+'">'+i+'</option>');
    }
 }

Here is my working example: https://jsfiddle.net/dmilos89/rhuh6qum/22/. If anyone can help with this problem please let me know.

Upvotes: 0

Views: 5415

Answers (1)

Brodie
Brodie

Reputation: 8737

basically you could look at using the Date api instead. In the bottom example, we have a startTime which can be a string,

  1. we split it into integers
  2. create a new Date object and set the time to the startTime
  3. add your change in minutes
  4. then pull out the new hour/minutes and format as you please (i think there are ways to get this via the Date api, but i figured heavy handed was fine for the example)

https://jsfiddle.net/2fpg3rte/1/

var time = new Date();
var startTime = "12:01 PM";
var timeChange = 60; //60 minutes
var startHour = startTime.split(':')[0];
var startMin = startTime.split(':')[1].replace(/AM|PM/gi, '');

time.setHours(parseInt(startHour));
time.setMinutes(parseInt(startMin));

$("#start").html(getFormattedTime(time));

//adjusted time
time.setMinutes(time.getMinutes() + timeChange);
$("#end").html(getFormattedTime(time));

function getFormattedTime(time) {
 var postfix = "AM";
 var hour = time.getHours();
 var min = time.getMinutes();

 //format hours
 if (hour > 12) {
   hour = (hour - 12 === 0) ? 12 : hour - 12;
   postfix = hour === 0 ? "AM" : "PM";
 }

 //format minutes
 min = (''+min).length > 1 ? min : '0' + min;
 return hour + ':' + min + ' ' + postfix;
}

Upvotes: 2

Related Questions