Denis Soto Denis Soto - 3 months ago 6
Javascript Question

asp:textbox hour difference with Javascript "onchange"

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).

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.

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

The Format I need is "HH:mm".

Could somebody help me with this?

EDIT (Code addition):



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


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

Answer

Finally, I found a solution for this.

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

Here is the code:

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>

This is working ok.

Important:

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