我使用兩個單獨的時間選項來計算持續時間，這對用戶來說效果很好。不過，我也想獲得持續時間 - 我希望在頁面的後期使用這個持續時間。我的問題是 - 我怎樣才能訪問已經計算出來的持續時間，並在使用第二個時間選擇器時顯示給用戶？允許訪問jQuery時間選擇器中計算的持續時間

我使用這個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 
    }); 
});

來源

2014-01-22 compguy24

不幸的是，這個插件沒有提供所要求的功能。您可以在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' 
    /*...*/ }); 
```
本課程將加入d最頂層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分鐘）」），我們可以淨化它RO成爲「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

來源

2014-01-22 22:03:23 n1k1ch

它可以計算這種方式：

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

來源

2014-01-22 22:47:21 compguy24

允許訪問jQuery時間選擇器中計算的持續時間

回答

完整的示例是HERE

相關問題