GridView ASP.NET中的JavaScript计时器

Question

In my product table i have a start date and end date. I want to show a countdown timer in my asp.net gridview such that when it expires it will show "Project Ended"

It is showing: But how do i remove hard coded date to pick the date from the sql database. Also, with the hard coded date it is only showing once in the first row of my gridview table. This is the aspx page:

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" CssClass="Grid" AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" DataKeyNames="ProjectID" DataSourceID="SqlDataSource1" ForeColor="Black" PageSize="50" GridLines="Vertical">
            <AlternatingRowStyle BackColor="#CCCCCC" />
            <Columns>
                 <asp:TemplateField HeaderText="S/N" HeaderStyle-Width="100">
                    <ItemTemplate>
                        <%# Container.DataItemIndex + 1 %>
                    </ItemTemplate>

<HeaderStyle Width="100px"></HeaderStyle>
                </asp:TemplateField>


                <asp:TemplateField HeaderStyle-Width="100" ShowHeader="False">
                <EditItemTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update" Text="Update"></asp:LinkButton>
                    &nbsp;<asp:LinkButton ID="LinkButton3" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel"></asp:LinkButton>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit" CssClass="glyphicon-edit"></asp:LinkButton>
                </ItemTemplate>
<HeaderStyle Width="100px"></HeaderStyle>
            </asp:TemplateField>

                <asp:TemplateField ShowHeader="false">
                <ItemTemplate>
            &nbsp;<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Delete" Text="Delete"></asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>

                <asp:BoundField DataField="ProjectID" HeaderText="ProjectID" InsertVisible="False" ReadOnly="True" SortExpression="ProjectID" />

                <asp:TemplateField ItemStyle-HorizontalAlign="Left" HeaderText="Project Title" SortExpression="ProjectTitle">
                    <EditItemTemplate>
                       <asp:TextBox ID="projectT" runat="server" Text='<%#Bind("ProjectTitle")%>' Height="48px" TextMode="MultiLine" Width="735px"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="ProjectTitle" runat="server" Text='<%#Bind("ProjectTitle") %>'>
                        </asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:BoundField DataField="StartDate" ItemStyle-HorizontalAlign="Left" HeaderText="StartDate" DataFormatString="{0:dd/MM/yyyy}" HtmlEncode="false" SortExpression="StartDate" >
<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>
                <asp:BoundField DataField="EndDate" ItemStyle-HorizontalAlign="Left" HeaderText="EndDate" DataFormatString="{0:dd/MM/yyyy}" HtmlEncode="false" SortExpression="EndDate" >
<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>
                <asp:BoundField DataField="Duration" ItemStyle-HorizontalAlign="Left" HeaderText="Duration" SortExpression="Duration" >
<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>
                <asp:BoundField DataField="ProjectCost" ItemStyle-HorizontalAlign="Left" HeaderText="ProjectCost" HtmlEncode="False" DataFormatString="{0:N}" SortExpression="ProjectCost" >
<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>
                <asp:BoundField DataField="Currency" ItemStyle-HorizontalAlign="Left" HeaderText="Currency" SortExpression="Currency" >
<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>
                <asp:BoundField DataField="PercentageOfCompletion" ItemStyle-HorizontalAlign="Left" HeaderText="% of Completion" HtmlEncode="False" DataFormatString="{0:P}" SortExpression="PercentageOfCompletion" >
<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>
                <asp:BoundField DataField="PhaseType" ItemStyle-HorizontalAlign="Left" HeaderText="PhaseType" SortExpression="PhaseType" >

<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>

                <asp:TemplateField HeaderText="Type" SortExpression="Type">
                    <ItemTemplate>
                        <asp:Label ID="Type" runat="server" Text='<%# Bind("Type") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ProjectTypeID" runat="server" SelectedValue='<%# Bind("ProjectTypeID") %>' DataTextField="Type" DataValueField="ProjectTypeID" DataSourceID="SqlDataSource2"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>



                         <asp:TemplateField HeaderText="State" SortExpression="StateName">
                    <ItemTemplate>
                        <asp:Label ID="StateName" runat="server" Text='<%# Bind("StateName") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="StateID" runat="server" SelectedValue='<%# Bind("StateID") %>' DataTextField="StateName" DataValueField="StateID" DataSourceID="SqlDataSource3"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>


                <asp:TemplateField HeaderText="LGA" SortExpression="LGName">
                    <ItemTemplate>
                        <asp:Label ID="LGName" runat="server" Text='<%# Bind("LGName") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="LGAID" runat="server" SelectedValue='<%# Bind("LGAID") %>' DataTextField="LGName" DataValueField="LGAID" DataSourceID="SqlDataSource4"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>


                        <asp:TemplateField HeaderText="Community" SortExpression="CommunityName">
                    <ItemTemplate>
                        <asp:Label ID="CommunityName" runat="server" Text='<%# Bind("CommunityName") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="CommunityID" runat="server" SelectedValue='<%# Bind("CommunityID") %>' DataTextField="CommunityName" DataValueField="CommunityID" DataSourceID="SqlDataSource5"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>


                <asp:TemplateField HeaderText="Company" SortExpression="CompanyName">
                    <ItemTemplate>
                        <asp:Label ID="CompanyName" runat="server" Text='<%# Bind("CompanyName") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="CoyID" runat="server" SelectedValue='<%# Bind("CoyID") %>' DataTextField="CompanyName" DataValueField="CoyID" DataSourceID="SqlDataSource6"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>


                         <asp:TemplateField HeaderText="Contractor" SortExpression="Company">
                    <ItemTemplate>
                        <asp:Label ID="Company" runat="server" Text='<%# Bind("Company") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ContractorID" runat="server" SelectedValue='<%# Bind("ContractorID") %>' DataTextField="Company" DataValueField="ContractorID" DataSourceID="SqlDataSource7"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>


                <asp:TemplateField HeaderText="Status" SortExpression="Status">
                    <ItemTemplate>
                        <asp:Label ID="Status" runat="server" Text='<%# Bind("Status") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="ProjectStatusID" runat="server" SelectedValue='<%# Bind("ProjectStatusID") %>' DataTextField="Status" DataValueField="ProjectStatusID" DataSourceID="SqlDataSource8"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>


                <asp:TemplateField HeaderText="Year" SortExpression="Year">
                    <ItemTemplate>
                        <asp:Label ID="Year" runat="server" Text='<%# Bind("Year") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:DropDownList ID="YearID" runat="server" SelectedValue='<%# Bind("YearID") %>' DataTextField="Year" DataValueField="YearID" DataSourceID="SqlDataSource9"></asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>

                 <asp:BoundField DataField="ProjectExistence" ItemStyle-HorizontalAlign="Left" HeaderText="Proj Existence" SortExpression="ProjectExistence" >


<ItemStyle HorizontalAlign="Left"></ItemStyle>
                 </asp:BoundField>

                <asp:TemplateField ItemStyle-HorizontalAlign="Left" HeaderText="Project Relevance" SortExpression="ProjectRelevance">
                    <EditItemTemplate>
                       <asp:TextBox ID="projectrelevance" runat="server" Text='<%#Bind("ProjectRelevance")%>' Height="204px" TextMode="MultiLine" Width="735px"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="ProjectRelevance" runat="server" Text='<%#Bind("ProjectRelevance") %>'>
                        </asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>


                <asp:TemplateField ItemStyle-HorizontalAlign="Left" HeaderText="Remarks" SortExpression="Remarks">
                    <EditItemTemplate>
                       <asp:TextBox ID="remark" runat="server" Text='<%#Bind("Remarks")%>' Height="204px" TextMode="MultiLine" Width="735px"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="remark01" runat="server" Text='<%#Bind("Remarks") %>'>
                        </asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="CountDown">
                    <ItemTemplate>
                        <div id="myCountdownClass"><%# !string.IsNullOrEmpty(Eval("EndDate").ToString()) ? Convert.ToDateTime(Eval("EndDate")).ToString("MM'/'dd'/'yyyy") : "" %></div>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>

This is my script:

<script>
        // Set the date we're counting down to
        var countDownDate = new Date("Oct 5, 2017 15:37:25").getTime();

        // Update the count down every 1 second
        var x = setInterval(function () {

            // Get todays date and time
            var now = new Date().getTime();

            // Find the distance between now an the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Display the result in the element with id="demo"
            document.getElementById("myCountdownClass").innerHTML = days + "d " + hours + "h "
            + minutes + "m " + seconds + "s ";

            // If the count down is finished, write some text 
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("myCountdownClass").innerHTML = "PROJECT ENDED";
            }
        }, 1000);

    </script>

Answer 1

Here is a quick demo of how to create a countdown timer in a GridView. Use a TemplateField and place the correct date in a div. Add a class to that div so you can reference it in jQuery.

<asp:TemplateField>
    <ItemTemplate>
        <div class="myCountdownClass"><%# Convert.ToDateTime(Eval("myDate")).ToString("MM'/'dd'/'yyyy") %></div>
    </ItemTemplate>
</asp:TemplateField>

And the jQuery function

<script type="text/javascript">
    $('.myCountdownClass').each(function () {
        var date = $(this).text();
        $(this).countdown(date, function (event) {
            $(this).text(event.strftime('%D days %H:%M:%S'));
        });
    });
</script>

This demo uses this as the countdown timer: http://hilios.github.io/jQuery.countdown/

UPDATE

To prevent errors when converting to datetime when the database value is null, use a ternary operator.

<%# !string.IsNullOrEmpty(Eval("myDate").ToString()) ? Convert.ToDateTime(Eval("myDate")).ToString("MM'/'dd'/'yyyy") : "" %>

UPDATE 2

<script type="text/javascript" src="/jquery.countdown.min.js"></script>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <div class="myCountdownClass"><%# Convert.ToDateTime(Eval("myDate")).ToString("MM'/'dd'/'yyyy") %></div>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <%# Convert.ToDateTime(Eval("myDate")).ToString("MM'/'dd'/'yyyy") %>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

<script type="text/javascript">
    $('.myCountdownClass').each(function () {
        var date = $(this).text();
        $(this).countdown(date, function (event) {
            $(this).text(event.strftime('%D days %H:%M:%S'));
        });
    });
</script>