Question

我正在尝试实现两个下拉菜单：一个用于时间值，另一个用于从该时间开始的持续时间。就像this之类的东西我在下拉菜单中使用bootstrap timepicker。我为第一个字段写了这个方法：

$('#timeWithDuration')
    .timepicker({ 'scrollDefaultNow': true })  
    .on('change', function() {  
        var from_time = $("input[name='from_time']").val();  
        $('#duration').timepicker({  
            'minTime': from_time,  
            'maxTime': '11:30pm',  
            'showDuration': true  
        });  
    });

其中#timeWithDuration是我的第一个输入字段，而#duration是我的第二个输入字段。这在我第一次使用时工作正常（在第一个字段中选择一个值后，我只能看到第二个字段中超过该值的时间），但它不再允许我更新这些值。即我无法为第一个字段和第二个字段选择新值。下拉列表显示正确，但随后不会更新选择的值这是输入字段的HTML代码：

<div class='col-sm-5'>
    <input id='timeWithDuration' type='text' class='form-control ui-timepicker-input' name='from_time' placeholder='What time?' autocomplete='off'>
</div>
<div class='col-sm-5'>
    <input id='duration' type='text' class='form-control ui-timepicker-input' placeholder='Duration' autocomplete='off'>
</div>

没有经验的前端开发，所以请保持温柔＆lt; 3干杯！

Answer 1

您似乎正在使用this timepicker。

您需要在#timeWithDuration输入上创建一个onchange事件，以更新时间戳上的minTime选项。

另外，我会在第一次的onchange事件之外初始化你的第二个时间戳。

＆＃13;

$('#timeWithDuration')
    .timepicker({ 'scrollDefaultNow': true })  
    .on('changeTime', function() {  
        var from_time = $("input[name='from_time']").val();  
        $('#duration').timepicker('option', 'minTime', from_time);
        if ($('#duration').val() && $('#duration').val() < from_time) {
            $('#duration').timepicker('setTime', from_time);
        }
    });

$('#duration').timepicker({'maxTime': '11:30pm', 'showDuration': true});

＆＃13;

<link href="https://rawgit.com/jonthornton/jquery-timepicker/master/jquery.timepicker.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/jonthornton/jquery-timepicker/master/jquery.timepicker.min.js"></script>

<div class="col-sm-5">
    <input id="timeWithDuration" type="text" class="form-control ui-timepicker-input" name="from_time" placeholder="What time?" autocomplete="off">
</div>
<div class="col-sm-5">
    <input id="duration" type="text" class="form-control ui-timepicker-input" placeholder="Duration" autocomplete="off">
</div>

＆＃13;

正如@Shlomi Hassid在他的回答中指出的那样，你也想要使用timepicker的changeTime事件，而不是原生的change事件，这样该函数才会执行当#timeWithDuration时间戳中的输入是有效时间时。

Answer 2

使用正确的事件changeTime并每次重置持续时间输入：

DEMO：radicale

HTML：

<div class='row'>
  <div class='col-sm-5'>
      <input id='timeWithDuration' type='text' class='form-control ui-timepicker-input' name='from_time' placeholder='What time?' autocomplete='off'>
  </div>
  <div class='col-sm-5'>
      <input id='duration' type='text' class='form-control' placeholder='Duration' autocomplete='off'>
  </div>   
</div>

JS：

$(function() {
  var $duration = $('#duration');
  var $timeWithDuration = $('#timeWithDuration');
  $timeWithDuration
    .timepicker({ 'scrollDefaultNow': true })  
    .on('changeTime', function() {  
        var from_time = $("input[name='from_time']").val(); 
        if ($duration.hasClass('ui-timepicker-input')) {
            $duration.timepicker('remove');
            $duration.val('');
        }
        $duration.timepicker({  
            'minTime': from_time,  
            'maxTime': '11:30pm',  
            'showDuration': true  
        });  
    });
});

链接两个bootstrap timepicker输入元素

2 个答案: