jQuery根据下拉列表的值和文本值(时间选择器)设置文本值 [英] jQuery set text value based on the value of a dropdown and a text value (timepicker)

问题描述

我想根据选择菜单的值和另一个时间选择器文本值在文本字段(时间选择器)中设置时间.

I would like the set the time in a text field (timepicker) based on the values of a select menu and another timepicker text value.

这个想法是，不同的约会类型具有不同的约会长度，并且我要根据约会类型和开始时间来设置约会结束时间.

The idea is that a different appointment types have different appointment lengths, and based on the appointment type and start time, I want to set the appointment end time.

<!-- 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技能不是很强.这是我到目前为止所拥有的.

I know how to do this in C#, but I was hoping to use jQuery for this. I don't know how to do with the 2 conditions. My jQuery skills aren't very strong. Here is what I have so far.

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

提前感谢您的帮助！

这是到目前为止我尝试过的.我认为我没有正确地计算时间.

Here is what I have tried so far. I don't think that I am doing the time calculation correctly.

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

});

推荐答案

我不确定您要使用timeDiff计算完成什么，但我认为您对此问题的思考过多.

I'm not sure what you were trying to accomplish with your timeDiff calculation, but I think you're over-thinking the problem.

如果将持续时间添加到分钟中，并进行检查以查看总和是否等于或大于60，则只需添加一个小时，然后从分钟的总和中减去60，即可获得正确的时间.如果总和小于60，则只需将持续时间添加到分钟数即可.

If you add the duration to the minutes and do a check to see if the sum is equal to or greater than 60, you can simply add an hour and subtract 60 from the minutes' sum to get the proper time. If the sum is less than 60, all you have to do is add the duration to the minutes.

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

现在，我们知道您使用的是哪个时间选择器插件，我已经更新了我的答案以说明AM/PM，并避免将其浪费在诸如"13:01"之类的错误时间上PM".

Now that we know which timepicker plugin you're using, I've updated my answer to account for AM/PM and to keep it from spitting out erroneous hours like "13:01 PM".

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

这篇关于jQuery根据下拉列表的值和文本值(时间选择器)设置文本值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！