JQuery 基于会议时长的时间选择器结束时间？

Question

我正在尝试根据我可以选择的会议时长获取结束时间下拉值。所以我的代码看起来像这样：

<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>

所以我可以选择开始时间，然后我可以选择动态创建的会议时长，然后我应该得到我的结束时间。我的会议间隔是 5 到 60 分钟。因此，如果我选择我的开始时间 8:00am 和我的会议时长 15 分钟，我应该以 15 分钟的间隔获得我的结束时间。所以我在结束下拉列表中的第一个值将是 8:15am，然后是 8:30am 等等。现在我能够在结束时间选择器 'step':15 中硬编码 mt 值。我需要的是我想传递我的会议长度值，这样可以增加我的结束时间。如果有人可以提供帮助，我将不胜感激。提前致谢。

Answer 1

使用option:selected查找当前选项的值：

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

[编辑]

其实有很多东西没有用，我创建了一个jsfiddle

我将事件绑定更改为使用

以编程方式进行

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

然后这样定义setEndTime：

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);
  }

然后将#meeting 下拉列表的初始化更改为第一件事：

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

我也将步长设置为固定值5，并在$('#start')上添加了一个事件：

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

这样，如果您更改开始时间或持续时间，它就会自行更新。

最终版本也更改了结束时间选择器中的步骤： http://jsfiddle.net/20m6b7qz/5/

JQuery 基于会议时长的时间选择器结束时间？

JQuery timepicker end time based on meeting length?

jquery

jquery-ui-timepicker