jQuery基於下拉列表的值和文本值設置文本值（timepicker）

Question

我希望根據選擇菜單和另一個timepicker文本值的值設置文本字段（timepicker）中的時間。

想法是，不同的約會類型有不同的約會長度，並根據約會類型和開始時間，我想設置約會結束時間。

<!-- Appt Type ---> 
<select id="ApptPurpose" name="ApptPurpose" class="form-control">         
    <option value="AHA">AHA</option> <!-- 60 minute appointment --> 
    <option value="FU">FU</option> <!-- 30 minute appointment --> 
    <option value="Screening">Screening</option> <!-- 30 minute appointment --> 
</select> 

<!-- Appt Start Time---> 
<input type="text" name="ApptStartTime" id="ApptStartTime" class="Time form-control" /> 

<!-- Appt End Time---> 
<input type="text" name="ApptEndTime" id="ApptEndTime" class="Time form-control" /> 

我知道如何在C＃中做到這一點，但我希望能爲此使用jQuery。我不知道如何處理這兩個條件。我的jQuery技能不是很強大。這是我到目前爲止。

$(function() { 
var ApptPurpose = $('#ApptPurpose').val(); 
var ApptStartTime = $('#ApptStartTime'); 
var ApptEndTime = $('#ApptEndTime'); 

    //when appt purpose changes 
    $("#ApptPurpose").change(function() { 
     // set end time 
    }); 

    // or when start time changes 
    $("#ApptStartTime").change(function() { 
     // set end time 
    }); 
}); 

在此先感謝您的幫助！

這是我到目前爲止嘗試過的。我認爲我沒有正確計算時間。

$(function() { 
var ApptPurpose = $('#ApptPurpose').val(); 
var ApptStartTime = $('#ApptStartTime'); 
var ApptEndTime = $('#ApptEndTime'); 

if (ApptPurpose == "FU") { 
    var ApptLength = 30; 
} 
else if (ApptPurpose == "Screening") { 
    var ApptLength = 30; 
} 
else { 
    var ApptLength = 60; 
} 

//when appt purpose changes 
$("#ApptPurpose").change(function() { 
    // set end time   

    var StartTime = $('#ApptStartTime').val().split(/:/), 
     ApptLengthTime = ApptLength.split(/:/); 

    timeDiff(StartTime[0] * 3600 + StartTime[1] * 60, ApptLengthTime[0] * 3600 + ApptLengthTime[1] * 60, $('#ApptEndTime')); 
}); 

// or when start time changes 
$("#ApptStartTime").change(function() { 
    // set end time 
}); 

}）;

Answer 1

我不確定你在用你的timeDiff計算來完成什麼，但我認爲你是在過度思考問題。

如果您將分鐘數添加到分鐘數並進行檢查以查看總數是否等於或大於60，則可以簡單地在分鐘總和中加上一小時並減去60以獲得適當的時間。如果總和小於60，您只需將時間添加到分鐘中即可。

function setTime() { 
    var ApptPurpose = $('#ApptPurpose').val(), 
     ApptStartTime = $('#ApptStartTime').val(), 
     ApptEndTime = $('#ApptEndTime'), 
     ApptPeriod = ApptStartTime.slice(-2), // Grab the last two characters (am or pm) 
     ApptLength = 0; 

    // Only proceed if #ApptStartTime isn't empty 
    if (ApptStartTime.length) { 
     var ApptSplit = ApptStartTime.split(/:/), 
      ApptStartHour = parseInt(ApptSplit[0]), // Convert the hour string to an integer 
      ApptStartMin = parseInt(ApptSplit[1]); // Convert the minute string to an integer 

     if (ApptPurpose == "FU" || ApptPurpose == "Screening") { 
      ApptLength = 30; 
     } else { 
      ApptLength = 60; 
     }   

     // Add the duration to the minutes. If it's equal to or more than 60.. 
     if (ApptStartMin + ApptLength >= 60) { 
      ++ApptStartHour; // Increment the hour by 1 
      // Fix the hour if it spills over 12 and change the AM/PM to match 
      if (ApptStartHour >= 12) { 
       ApptStartHour = ApptStartHour === 13 ? 1 : ApptStartHour; 
       ApptPeriod = ApptPeriod === 'pm' ? 'am' : 'pm'; 
      } 
      ApptStartMin = ApptStartMin + ApptLength - 60; // Subtract 60 from the sum 
      // Make sure we always have two digits (e.g. '00' instead of '0') 
      ApptStartMin = ("0" + ApptStartMin).slice(-2); 
     // If it's less than 60... 
     } else { 
      ApptStartMin = ApptStartMin + ApptLength; // Add the duration to the minutes 
     } 

     // Rebuild the time string and plop it into #ApptEndTime 
     $('#ApptEndTime').val(ApptStartHour + ':' + ApptStartMin + ApptPeriod); 
    } 
} 

$('.Time').timepicker({ 'scrollDefault': 'now' }); 

// When #ApptPurpose changes 
$("#ApptPurpose").change(function() { 
    setTime(); 
}); 

// or when #ApptStartTime changes 
$("#ApptStartTime").change(function() { 
    setTime(); 
}); 

編輯：現在我們知道timepicker插件，您正在使用，我已經更新了我的答案佔了AM/PM，並防止其吐出，如「13:01 PM錯誤小時」。

更新提琴：http://jsfiddle.net/uLgvy7qn/10/