鏈接兩個自舉timepicker輸入元素

我想實現兩個下拉菜單：一個用於時間值，一個用於從該時間開始的持續時間。即類似於this。
我在下拉菜單中使用了引導程序timepicker。我寫的第一個字段這個方法：鏈接兩個自舉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是我的第二。這在我第一次運行時很好（在第一個字段中選擇一個值後，我只能看到在第二個字段中超過該值的時間），但它不會讓我再更新這些值。即我無法爲第一個和第二個字段都選擇一個新值。下拉菜單顯示正確，但不會更新select上的值。
這是輸入字段的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>

雛前端開發這裏，所以請溫柔< 3乾杯！

來源

2015-08-28 Roland Batovski

您可以創建一個的jsfiddle ？ – RRK

你寫的代碼只會初始化'＃duration' timepicker。您可能必須使用其他方法來修改現有的時間選擇器。 – Barmar

RejithRKrishnan，我沒有時間選擇器的引導代碼，所以不能這麼做： - /對不起。 Barmar，我明白了。現在有意義:)我會嘗試看看我能做些什麼 –

看起來像你正在使用this timepicker。

您需要在#timeWithDuration輸入上創建onchange事件，以更新您的timepicker上的minTime選項。

另外，我會初始化您的第二個timepicker在第一個onchange事件之外。

$('#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});

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

由於@Shlomi哈西德在他的回答中指出，你也想使用timepicker的changeTime事件，而不是原生change事件，所以該功能將只執行時輸入你的#timeWithDuration時間選擇器是一個有效的時間。

來源

2015-08-28 15:48:13

是的，看起來像我應該做的。但是，我收到此錯誤：無法設置未定義的屬性'minTime'。所以我猜它還沒有初始化，當我試圖更新它 –

你還在初始化onchange中的'＃duration' timepicker嗎？ –

添加了一個代碼片段來演示。您可能需要全屏查看它才能看到底部的時間選擇器。 –

使用合適的事件changeTime每一次復位時間輸入：

DEMO：JSnippet

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

來源

2015-08-28 16:43:28

鏈接兩個自舉timepicker輸入元素

回答

相關問題