Implement (Display) count down timer inside 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="ListView1" 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>
        <hr />
    </ItemTemplate>
</asp:ListView>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(function () {
        setInterval(function () {
            $("[id*=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));
            });
        }, 1000);
    });

    function GetTimer(startDate, endDate) {
        var startDate = new Date(startDate).getTime();
        var endDate = new Date(endDate).getTime();
        // Time calculations for days, hours, minutes and seconds
        var countDownDate = endDate;
        var now = new Date().getTime();
        var distance = countDownDate - now;
        var obj = {};
        obj.days = Math.floor(distance / (1000 * 60 * 60 * 24));
        obj.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        obj.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        obj.seconds = Math.floor((distance % (1000 * 60)) / 1000);

        return 'Days:' + obj.days + ' Hours:' + obj.hours + ' Minutes:' + obj.minutes + ' Seconds:' + obj.seconds;
    };
</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/05/27");
        dt.Rows.Add("2022/04/25", "2022/05/01");
        this.ListView1.DataSource = dt;
        this.ListView1.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/05/27")
        dt.Rows.Add("2022/04/25", "2022/05/01")
        Me.ListView1.DataSource = dt
        Me.ListView1.DataBind()
    End If
End Sub

Screenshot