完整演示为HERE

Question

我正在使用两个独立的时间戳来计算持续时间，这对用户来说效果很好。但是，我也想访问持续时间 - 我想在页面后期的计算中使用。我的问题是 - 我如何访问已计算的持续时间，并在使用第二个时间戳时显示给用户？

我正在使用这个jquery timepicker：https://github.com/jonthornton/jquery-timepicker#timepicker-plugin-for-jquery

我的HTML

<div class = "form-group">
    <label for="lesson_start_time">Lesson start time:</label>
    <input type="text" id="lesson_start_time" name="lesson_start_time" class="form-control ui-timepicker-input">
</div>
<div class = "form-group" id="end_time">
    <label for="lesson_end_time">Lesson end time:</label>
    <input type="text" id="lesson_end_time" name="lesson_end_time" class="form-control ui-timepicker-duration">
</div>

我的js

// for start time of lesson
$('#lesson_start_time').timepicker({ 'step': 15 });
// temporarily disable end time
$("#lesson_end_time").prop('disabled', true);
// when a start time is chosen
$('#lesson_start_time').on('changeTime', function() {
    // enable the end time input
    $('#lesson_end_time').prop('disabled', false);
    // enable the input as a timepicker
    $('#lesson_end_time').timepicker({
        'minTime': $(this).val(),
        'showDuration': true,
        'step':15
    });
});

Answer 1

不幸的是，此插件不提供所请求的功能。您可以在Github发布功能请求。

但有一种解决方法：您可以通过找到合适的span并使其获得text()来使用所选持续时间的实际值。

为timepicker生成的HTML是：

<div class="ui-timepicker-wrapper ui-timepicker-with-duration">
    <ul class="ui-timepicker-list">
        <li>12:15am<span class="ui-timepicker-duration"> (15 mins)</span></li>
        <li class="ui-timepicker-selected">1:00am<span class="ui-timepicker-duration"> (1 hr)</span></li>
        <!-- ... -->
    </ul>
</div>

我们可以通过以下方式使用它：

为timepicker创建lesson_end_time时，请添加className: 'endTime'选项：
```
$('#lesson_end_time').timepicker({
    /*...*/
    className: 'endTime'
    /*...*/ });
```
此类将添加到最顶层div，因此，它将变为：

<div class="ui-timepicker-wrapper endTime ui-timepicker-with-duration">

在changeTime内部处理程序以这种方式查找所需的span：

var selectedDurationSpan = $(".ui-timepicker-wrapper.endTime").find("li.ui-timepicker-selected").find("span.ui-timepicker-duration");

然后我们可以得到它的价值。这将是parenteses和空格（“（30分钟）”），我们可以净化它变得“30分钟”：
```
var selectedDuration = selectedDurationSpan.text().trim().replace(/[()]/g,'');
```
值可以应用于某些input，（我创建了<input id='lesson_duration' />）：
```
$("#lesson_duration").val(selectedDuration);
```

因此，这里是lesson_end_time timepicker初始化的完整代码：

$('#lesson_end_time').timepicker({
    minTime: $(this).val(),
    showDuration: true,
    step: 15,
    className: 'endTime'
}).on("changeTime", function () {
    var selectedDurationSpan = $(".ui-timepicker-wrapper.endTime").find("li.ui-timepicker-selected").find("span.ui-timepicker-duration");
    var selectedDuration = selectedDurationSpan.text().replace(/[()]/g, '');
    $("#lesson_duration").val(selectedDuration);
});

完整演示为HERE

Answer 2

可以这样计算：

http://jsfiddle.net/4fqU8/1/

$(function(){
$('input.time').timepicker();
$('#delta').on('click', function(){
    var seconds = $('#time2').timepicker('getSecondsFromMidnight') - $('#time1').timepicker('getSecondsFromMidnight');

    // compensate for negative values;
    if (seconds < 0) {
        seconds += 86400;
    }

    alert((seconds / 60) + ' minutes');
});
});

从：

https://github.com/jonthornton/jquery-timepicker/issues/191

允许访问jquery时间选择器中的计算持续时间

2 个答案:

完整演示为HERE