Question

我需要一些帮助，我的表格中有三个<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>，我需要计算其中两个之间的时差（并在第三个上设置差值）。

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

有时我需要计算两个不同日期之间的时差。但是我无法在TextBox中设置“Date”。

我需要的格式是“HH：mm”。

有人可以帮我吗？

编辑（代码添加）：

ASPX：

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

C＃：

cd python_project
python -m unittest discover

一些字段名称是西班牙语（diferencia，duracionveintitres等）。对不起。

Answer 1

它应该类似于：

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

Answer 2

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

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

以下是代码：

SCRIPT：

        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>

这工作正常。

重要：

输入格式应为＆＃34; HH：mm＆＃34; （如果凌晨1:00，则是01:00;如果是下午1:00，则是13:00）。

Answer 3

以下代码将以文本格式获取日期时间，并找出小时和分钟的差异。我希望这能满足你的要求，或者至少推动你走上正轨。

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>

的Javascript

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:00:00

2016-09-23 20:31:00

Time Diff：72：31

Fiddle Here

<强>推荐

而不是像这样解析它并使用文本框Jquery提供＆＃34; jquery ui date parser＆＃34;获取日期对象的简单方法，您可以使用日期选择器。查看found here

希望这有帮助，祝你好运

asp：使用Javascript“onchange”的文本框小时差异

编辑（代码添加）：

3 个答案:

以下是代码：

重要：