jQuery timepicker插件來限制end_time字段

Question

我使用jQuery timepicker插件（https://github.com/trentrichardson/jQuery-Timepicker-Addon）對#start_time和#end_time標識符的2個文件。我希望#end_time必須更大或從#start_time開始。我嘗試了下面的代碼，但我不擅長jQuery。

$(function() { 
$('#start_time').timepicker({ 
    onClose: function(timeText, inst) { 
     if ($('#end_time').val() != '') { 
      var testStartTime = $('#start_time').timepicker('getTime'); 
      var testEndTime = $('#end_time').timepicker('getTime'); 
      if (testStartTime > testEndTime) 
       $('#end_time').timepicker('setTime', testStartTime); 
     } 
     else { 
      $('#end_time').val(timeText); 
     } 
    }, 
    onSelect: function (selectedTime){ 
     $('#end_time').timepicker('option', 'minTime', $('#start_time').timepicker('getTime')); 
    } 
}); 
$('#end_time').timepicker({ 
    onClose: function(timeText, inst) { 
     if ($('#start_time').val() != '') { 
      var testStartTime = $('#start_time').timepicker('getTime'); 
      var testEndTime = $('#end_time').timepicker('getTime'); 
      if (testStartTime > testEndTime) 
       $('#start_time').timepicker('setTime', testEndTime); 
     } 
     else { 
      $('#start_time').val(timeText); 
     } 
    }, 
    onSelect: function (selectedTime){ 
     $('#start_time').timepicker('option', 'maxTime', $('#end_time').timepicker('getTime')); 
    } 
}); 
}); 

我有兩個時間輸入start_time和end_time。

Answer 1

Takek偷看https://stackoverflow.com/a/2694937/243639開始。特別感興趣的是包含$('#endDate').datepicker("option", 'minDate', new Date(dateText));的行。您可以在onSelect函數中爲一個時間選擇器使用新的日期以設置另一個的minDate（或maxDate）。

timepicker是另一個SO帖子中引用的jQuery datepicker的擴展，所以解決方案也應該應用於timepicker。

Answer 2

試試這個工作演示請：http://jsfiddle.net/fMnw8/

它是如何工作的：

• 它不會允許用戶選擇end_time，直到你會選擇start_time
• 然後，檢查AM & PM匹配和進一步條件。

這會給你足夠的提示玩弄。

希望它會適合你的事業:)

代碼

$(function() { 
    $('#start_time').timepicker({ 
     timeFormat: 'hh:mm TT', 
     ampm: true, 
     hour: 10, 
     onSelect: function(selectedTime) { 
      sHours = parseInt(selectedTime.substring(0, 2)); 
      sMins = parseInt(selectedTime.substring(3, 6)); 
      sAmpm = selectedTime.substring(6, 8); 

      if (sAmpm == 'PM') { 
       sHours = sHours + 12; 
      } 

      $('#end_time').remove(); 
      start_val = $('#start_time').val(); 
      $('<input id="end_time" value="' + start_val + '"/>').timepicker({ 
       timeFormat: "hh:mm TT", 
       hourMin: sHours, 
       sMinutes: sMins, 
       ampm: true, 
       hour: 10, 
       onSelect: function(selectedTime) { 
        eHours = parseInt(selectedTime.substring(0, 2)); 
        eMins = parseInt(selectedTime.substring(3, 6)); 
        eAmpm = selectedTime.substring(6, 8); 

        if (eAmpm == sAmpm) { 
         if (sHours > eHours || sMins > eMins) { 
          alert('Sorry -Time is greater then start time'); 
          $('#end_time').val(""); 
          return false; 
         } 
        } 
       } 
      }).insertAfter('#start_time'); 
     } 
    }); 
});​ 

Answer 3

我已經修改了一些事情，現在它的工作。以下是密碼

<script> 
$(document).ready(function() { 

$('#start_time').timepicker({ 
    timeFormat: "hh:mm TT", 
    ampm: true, 
    hourMin: 8, 
    hourMax: 18, 
    onClose: function(dateText, inst) { 
     if ($('#end_time').val() != '') { 
      var testStartTime = $('#start_time').datetimepicker('getDate'); 
      var testEndTime = $('#end_time').datetimepicker('getDate'); 
      if (testStartTime > testEndTime) { 
       $('#end_time').timepicker('setDate', testStartTime); } 
     } 
     else { 
      $('#end_time').val(dateText); 
     } 
    }, 
    onSelect: function (selectedDateTime){ 
     if (testStartTime > testEndTime) { 
     $('#end_time').datetimepicker('option', 'minDate', $('#start_time').datetimepicker('getDate')); 
     } 
    } 
}); 

$('#end_time').timepicker({ 
    timeFormat: "hh:mm TT", 
    ampm: true, 
    hourMin: 8, 
    hourMax: 18,  
    onClose: function(dateText, inst) { 
     if ($('#start_time').val() != '') { 
      var testStartTime = $('#start_time').datetimepicker('getDate'); 
      var testEndTime = $('#end_time').datetimepicker('getDate'); 
      if (testStartTime > testEndTime) { 
       $('#start_time').timepicker('setDate', testEndTime); } 
     } 
     else { 
      $('#start_time').val(dateText); 
     } 
    }, 
    onSelect: function (selectedDateTime){ 
     if (testStartTime > testEndTime) { 
     $('#start_time').datetimepicker('option', 'maxDate', $('#end_time').datetimepicker('getDate')); 
     } 
    } 
}); 

}); 
</script> 

感謝您的幫助。

Answer 4

 var startDateTextBox = $('#dialog_missionAdd input[name=scheduleStarttime]'); 
     var endDateTextBox = $('#dialog_missionAdd input[name=scheduleEndtime]'); 

     startDateTextBox.timepicker({ 
      defaultValue: "00:00", 
      timeFormat: "HH:mm", 
      onClose: function(dateText, inst) { 
       if (endDateTextBox.val() != '') { 
        var testStartTime = startDateTextBox.datetimepicker('getDate'); 
        var testEndTime = endDateTextBox.datetimepicker('getDate'); 
        if (testStartTime > testEndTime) { 
         endDateTextBox.timepicker('setDate', testStartTime); } 
       } 
       else { 
        endDateTextBox.val(dateText); 
       } 
      }, 
      onSelect: function (selectedDateTime) { 
       endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate')); 
      } 
     }); 

     endDateTextBox.timepicker({ 
      defaultValue: "00:00", 
      timeFormat: "HH:mm", 
      onClose: function(dateText, inst) { 
       if (startDateTextBox.val() != '') { 
        var testStartTime = startDateTextBox.datetimepicker('getDate'); 
        var testEndTime = endDateTextBox.datetimepicker('getDate'); 
        if (testStartTime > testEndTime) { 
         startDateTextBox.timepicker('setDate', testEndTime); } 
       } 
       else { 
        startDateTextBox.val(dateText); 
       } 
      }, 
      onSelect: function (selectedDateTime) { 
       startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate')); 
      } 
     });