asp:带有Javascript"onchange"的文本框时差 [英] asp:textbox hour difference with Javascript "onchange"

问题描述

我需要一些帮助，我的表单中有三个< asp:TextBox> ，我需要计算其中两个之间的时间差(并在第三个值上设置差值)

I need some help here, I have three <asp:TextBox> in my form and I need to calculate the time difference between 2 of them (and set the difference value on the third).

我已经用PostBack完成了它，并且工作正常，但是我想从客户端进行(不需要PostBack).这就是为什么我想知道是否有一种方法可以进行计算并使用javascript在第三个TextBox中显示值.

I have done it with PostBack and it's working fine, but I want to do it from client side (no PostBack needed). That's why I want to know if there is a way to make the calculation and show the value in the third TextBox with javascript.

有时，我将需要计算2个不同日期之间的时差.但是我无法在文本框内设置日期".

Some times I will need to calculate the time difference between 2 different dates. But I can't set the "Date" inside the TextBox.

我需要的格式是"HH:mm".

The Format I need is "HH:mm".

有人可以帮我吗?

ASPX:

<td>
    <asp:TextBox ID="TBStart1" runat="server" Width="50px"></asp:TextBox>
</td>
<td>
    <asp:TextBox ID="TBEnd1" runat="server" Width="50px" AutoPostBack="true"></asp:TextBox>
</td>
<td>
    <asp:TextBox ID="TBDuration1" runat="server" Width="50px"></asp:TextBox>
</td>

C#:

if (IsPostBack)
        {
            //CHECK IF THE FIELD IS NOT BLANK. IF IT'S BLANK, THE PROCESS WILL NOT START.
            if (TBEnd1.Text != "")
            {
                DateTime veinticuatro1 = DateTime.ParseExact("23:59", "HH:mm", CultureInfo.InvariantCulture);
                DateTime unminuto1 = DateTime.ParseExact("00:01", "HH:mm", CultureInfo.InvariantCulture);
                DateTime inicio1;
                inicio1 = new DateTime();
                inicio1 = DateTime.ParseExact(TBStart1.Text, "HH:mm", CultureInfo.InvariantCulture);
                DateTime fin1;
                fin1 = new DateTime();
                fin1 = DateTime.ParseExact(TBEnd1.Text, "HH:mm", CultureInfo.InvariantCulture);
                //CHECK IF THE END TIME IS LOWER THAN THE START TIME. THIS MEANS THAT THE INTERVAL IS BETWEEN TWO DIFFERENT DATES (EXAMPLE: 23:50 TO 01:30) 
                if (fin1 < inicio1)
                {
                    TimeSpan diferencia1 = fin1.Subtract(inicio1);
                    DateTime duracionveintitres1 = veinticuatro1.Add(diferencia1);
                    DateTime duracionfinal1 = duracionveintitres1.AddMinutes(1);
                    string dife1 = duracionfinal1.ToString("HH:mm");
                    TBDuration1.Text = dife1;
                    TBDuration1.Focus();
                }
                else
                {
                    TimeSpan diferencia1 = fin1.Subtract(inicio1);
                    DateTime diferenciadt1 = DateTime.ParseExact(diferencia1.ToString(), "HH:mm:ss", null);
                    string dife1 = diferenciadt1.ToString("HH:mm");
                    TBDuration1.Text = dife1;
                    TBDuration1.Focus();
                }
            }

某些字段名称使用西班牙语(diferencia，duracionveintitres等).抱歉.

Some of the field names are in Spanish (diferencia, duracionveintitres, etc). Sorry for that.

推荐答案

最后，我找到了解决方案.

Finally, I found a solution for this.

我必须将< asp.TextBox> 更改为< input/> .我在以下URL中找到了脚本: https://www.linuxito.com/programacion/483-como-restar-horas-en-javascript

I had to change my <asp.TextBox> to <input/>. I found the script in this URL: https://www.linuxito.com/programacion/483-como-restar-horas-en-javascript

脚本:

        function HourDifference() {

        start = document.getElementById("start").value;
        end = document.getElementById("end").value;

        startMinutes = parseInt(start.substr(3, 2));
        startHours = parseInt(start.substr(0, 2));
        endMinutes = parseInt(end.substr(3, 2));
        endHours = parseInt(end.substr(0, 2));

        minutesDiff = endMinutes - startMinutes;
        hoursDiff = endHours - startHours;

        if (minutesDiff < 0) {
            hoursDiff --;
            minutesDiff = 60 + minutesDiff;
        }

        if (minutesDiff < 10) {
            minutesDiff = "0" + minutesDiff;
        }

        if (hoursDiff < 0) {
            hoursDiff = 24 + hoursDiff;
        }

        hours = hoursDiff.toString();
        minutes = minutesDiff.toString();

        if (hours.length < 2) {
            hours = "0" + hours;
        }

        if (minutes.length < 2) {
            minutes = minutes + "0";
        }

        document.getElementById("difference").value = hours + ":" + minutes;
        }

HTML:

<p><input type="text" id="start" value=""/></p>

<p><input type="text" id="end" value="" onchange="HourDifference();" /></p>

<p><input type="text" id="difference" value="" /></p>

这正常.

输入格式应为"HH:mm"(如果上午1:00为01:00；下午1:00为13:00).

The input format should be "HH:mm" (if 1:00 am, is 01:00; if 1:00 pm, is 13:00).

这篇关于asp:带有Javascript"onchange"的文本框时差的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！