Display time difference between two dates in ASP.Net ListView using JavaScript and jQuery

Hi nauna,

Please refer below sample. 

Note: For this sample i have used temporary DataTable. For more details refer How to create Temporary Table in ASP.Net using C# and VB.Net.

HTML

<asp:ListView ID="lvDate" runat="server">
    <ItemTemplate>
        <div id="dvTimes">
            Start Time:<asp:Label ID="lblStartDateTime" Text='<%# Eval("StartDate") %>' runat="server"></asp:Label>
            <br />
            End Time:<asp:Label ID="lblEndDateTime" Text='<%# Eval("EndDate") %>' runat="server"></asp:Label>
            <br />
            Time Difference:<asp:Label ID="lblTimer" runat="server"></asp:Label>
        </div>
    </ItemTemplate>
</asp:ListView>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#dvTimes").each(function () {
            var startTime = $(this).find("[id*=lblStartDateTime]").html();
            var endTime = $(this).find("[id*=lblEndDateTime]").html();
            $(this).find("[id*=lblTimer]").html(GetTimer(startTime, endTime));
        });
    });


    function GetTimer(startDate, endDate) {
        var timeStart = new Date(endDate).getTime();
        var timeEnd = new Date(startDate).getTime();
        var hourDiff = timeEnd - timeStart;
        var secDiff = hourDiff / 1000;
        var minDiff = hourDiff / 60 / 1000;
        var hDiff = hourDiff / 3600 / 1000;
        var obj = {};
        obj.hours = Math.floor(hDiff);
        obj.minutes = minDiff - 60 * obj.hours;
        return "hours:" + obj.hours + ' minutes:' + obj.minutes;
    }
</script>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] {
                            new DataColumn("StartDate"),
                            new DataColumn("EndDate")
        });
        dt.Rows.Add("2022/04/22", "2022/04/07");
        this.lvDate.DataSource = dt;
        this.lvDate.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn() {New DataColumn("StartDate"), New DataColumn("EndDate")})
        dt.Rows.Add("2022/04/22", "2022/04/07")
        Me.lvDate.DataSource = dt
        Me.lvDate.DataBind()
    End If
End Sub

Screenshot