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/