asp:textbox 小时差异与 Javascript “onchange”

asp:textbox hour difference with Javascript "onchange"

本文关键字：Javascript onchange textbox 小时 时差 asp      更新时间：2023-09-26

我在这里需要一些帮助，我的表格中有三个<asp:TextBox>，我需要计算其中两个之间的时间差（并在第三个上设置差值）。

我已经用回发完成了它，它工作正常，但我想从客户端完成（不需要回发）。这就是为什么我想知道是否有办法进行计算并使用javascript在第三个文本框中显示值。

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

我需要的格式是"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等）。对不起。

它应该类似于：

$('#TBEnd1').on('change',function() 
{
  var start_time = $('#TBStart1').val();
  var end_time = $('#TBEnd1').val();
  var diff =  new Date(end_time) - new Date( start_time);  

  $('#TBDuration1').val(diff);
}

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

我不得不将<asp.TextBox>更改为<input/>.我在此 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 am，则为 01：00;如果 1：00 pm，则为 13：00）。

下面的代码将获取文本格式的日期时间，并找到小时和分钟的差异。我希望这将满足您的要求，或者至少将您推向正确的轨道。

.HTML

<div id="textBoxOne">
2016-09-20 20:00:00
</div>
<div id="textBoxTwo">
2016-09-23 20:31:00
</div>
<div id="ShowTimeBetweenDates">
</div>

爪哇语

var dateOne = document.getElementById("textBoxOne").innerHTML;
var dateTwo = document.getElementById("textBoxTwo").innerHTML;
var diff =  (new Date(dateOne) - new Date(dateTwo))
var totalHours = Math.floor(Math.abs(diff/ 3600 / 1000));
var totalMinutes = Math.abs(((diff % 86400000) % 3600000) / 60000); 
var showTimeDiff = document.getElementById("ShowTimeBetweenDates");
showTimeDiff.innerHTML = "Time Diff : " + totalHours + " : " + totalMinutes;

结果

2016-09-20 20：01：00

2016-09-23 20：31：00

时差 ： 72 ： 31

在这里摆弄

建议

与其像这样解析它并使用文本框 Jquery 提供了"jquery ui 日期解析器"一种获取日期对象的简单方法，您可以使用日期选择器。在这里查看

希望这有帮助，祝你好运

相关文章：