JQuery timepicker end time based on meeting length?

Question

I'm trying to get my end time drop down values based on the length of meeting that I can pick. So my code look like this:

<tr>
    <th>Start:</th>
    <td><input type="text" id="start" name="start"/></td>
</tr>
<tr>
    <th>Length of meeting</th>
    <td>
       <select name="meeting" id="meeting" onClick="interval()">
          <option value="">--Select length--</option>
       </select>
    </td>
</tr>
<tr>
    <th>End:</th>
    <td><input type="text" id="end" name="end"></td>
</tr>

<script>
$(function() { 
    $('#start').timepicker({
       'minTime':'8:00 AM',
       'maxTime':'9:00 PM'
    });

    $('#end').timepicker({
       'minTime':'8:00 AM',
       'maxTime':'9:00 PM',
       'step':???(how to pass my value from meeting dropdown here?)
     });
   });

   function interval(){
    var meeting = $('#meeting').val();
    if(meeting == ''){
        $('#meeting').empty();
        $('#meeting').append('<option value="">--Select length--</option>');
        for(var i=5; i <= 60; i+=5){
            $('#meeting').append('<option value="'+i+'">'+i+'   min'+'</option>');
        }   
    }
}
</script>

So I can pick start time, then I can pick the length of my meeting that is created dynamically and then I should get my end time. Intervals of my meetings are from 5 to 60 min. So if I pick my start time 8:00am and my meeting length 15min, I should get my end time in intervals of 15min. So my first value in end dropdown will be 8:15am, then 8:30am and so on. For now I was able to hard code mt value in end timepicker 'step':15. What I need is that I want to pass my meeting length value and that way increment my end time. If anyone can help with this I would appreciate. Thanks in advance.

I got this error: Error: Method refresh does not exist on jQuery.timepicker ...rn!1;return!0},error:function(a){throw new Error(a)},parseHTML:function(a,b,c){v.. Does anyone know how I can fix this error? I think is related with jquery libraries, but I'm not sure which libraries I should include. — espresso_coffee, Dec 04 '15 at 01:42

simdrouin · Accepted Answer · 2015-12-03T23:32:30.677

1

Use option:selected to find the current option's value:

$('#end').timepicker({
       'minTime':'8:00 AM',
       'maxTime':'9:00 PM',
       'step':$('#meeting').find('option:selected').val()
     });

[EDIT]

Actually, there were many things not working, I have created a jsfiddle

I changed the event binding to be made programmatically using

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

Then defined setEndTime like this:

function setEndTime() {
     var meetingLength = parseInt($('#meeting').find('option:selected').val() || 0),
             selectedTime = $('#start').timepicker('getTime');
      selectedTime.setMinutes(selectedTime.getMinutes() + parseInt(meetingLength, 10), 0);
        $('#end').timepicker('setTime', selectedTime);
  }

Then changing the initialization of the #meeting dropdown to be the first thing:

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

I also set the step to be a fixed value of 5 and added an event on $('#start'):

$('#start').on('changeTime', function () {
    setEndTime();
  });

This way it updates itself if you change the start time or the duration.

Final version which also changed the step in the endtime picker: http://jsfiddle.net/20m6b7qz/5/

edited Dec 03 '15 at 23:32

answered Dec 03 '15 at 22:17

simdrouin

1,008
11
21

I tried this but script error showed up... I'm not sure why. – espresso_coffee Dec 03 '15 at 22:29
Error said that script does not work. Something like javascript alert box showed up. – espresso_coffee Dec 03 '15 at 22:37
A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue. – espresso_coffee Dec 03 '15 at 22:38
Looks like that works just for intervals of 5min, if I select 10min just first value in end time gets correct time all other values are still in interval of 5. Is it possible for end time to increment based on the length of the interval? – espresso_coffee Dec 03 '15 at 23:09
Do you want to change the step or the end time when you select an interval? Or Both the end time and the end time interval? – simdrouin Dec 03 '15 at 23:11
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/96933/discussion-between-simdrouin-and-user3023588). – simdrouin Dec 03 '15 at 23:14
Ok, I finally fixed my error. Problem was in jquery.timepicker.js file. Once I found js file that I need my code works fine. I have one question, how I can add something like this "(slot 1)" nest to my end time. So next to each value in end time drop down I would like to include word slot and numeric value. Example: 8:15am (slot 1), 8:30am (slot 2), 9:00am (slot 3),... and so on. Where I should update this piece in my code? Thanks in advance. – espresso_coffee Dec 04 '15 at 04:07
You could look at timeFormat – simdrouin Dec 04 '15 at 13:12
Thank you, that actually helped me to solve the problem. – espresso_coffee Dec 04 '15 at 16:33
Is it possible not to show up end time right after I select start time? That way user can hit end time drop down and pick what they want instead of now automatically give them an end time. – espresso_coffee Dec 08 '15 at 17:05
1

Yes, just remove the event 'changeTime' on the #start element – simdrouin Dec 08 '15 at 19:35
I still have a problem with this timepicker. First problem is that I can not apply refresh option. My library did not support that and I tried some other plugins but still does not work. Second problem is when I pick end time and after that click again on end time, I do not have end time highlighted that was previously picked. Do you know how this can be fixed? Thanks in advance. – espresso_coffee Jan 12 '16 at 15:25

JQuery timepicker end time based on meeting length?

1 Answers1