Solved

Timer to Display HH:MM:SS from a datetime Label in a FormView

Posted on 2015-01-16
8
165 Views
Last Modified: 2015-01-20
I have an ASPX page with a label inside a FormView.  The SQLDataSource pulls a date field.  I'd like to display on the page how long it's been since the date \ time on the label in hours, minutes, and seconds format. HH:MM:SS or possibly even using this flip counter found online here   and demo here.

I'm a pre-novice at both javascript and jquery languages.

I included a basic page aspx.vb page below for testing.  could someone please help me link this up to start from one of the labels in the FormView?  ... and or maybe how to link it hh;mm:ss to the 3 labels so they update on client side?

<%@ Page Language="VB" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Label ID="HourLabel" runat="server" ></asp:Label>
                hh
                <asp:Label ID="MinuteLabel" runat="server" ></asp:Label>
                mm
                <asp:Label ID="SecondsLabel" runat="server" ></asp:Label>
                ss
                <br />
                <asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource1">
                    <ItemTemplate>
                        PriorInsert:
                        <asp:Label ID="PriorInsertLabel" runat="server" Text='<%# Bind("PriorInsert") %>' />
                        <br />
                        EPOCH_DATE:
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("EPOCH_DATE") %>' />
                        <br />

                    </ItemTemplate>
                </asp:FormView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MAS90ConnectionString %>" 
                                   SelectCommand="select dateadd(ss, -5000, GETDATE()) as PriorInsert,  
                                   DATEDIFF(s, '1970-01-01 00:00:00', dateadd(ss, -5000, GETDATE())) as EPOCH_DATE">
                </asp:SqlDataSource>
            </div>
        </form>
    </body>
</html>

Open in new window

0
Comment
Question by:sphilip951
  • 5
  • 3
8 Comments
 

Author Comment

by:sphilip951
Comment Utility
Ok, I made a little progress with this.  But still not entirely there.  I got it to start a timer on page load , but I really need it from the time in the FormView.

I'm begging someone to help me out

<%@ Page Language="VB" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function calctime() {
                var sec = 0;
                function pad(val) {
                    return val > 9 ? val : "0" + val;
                }
                setInterval(function () {
                    var seconds = pad(++sec % 60);
                    var minutes = pad(parseInt(sec / 60, 10));
                    var hours = pad(parseInt((sec / 60) / 60, 10));
                    minutes = minutes - (hours * 60);
                    minutes = padDigits(minutes, 2);
                    document.getElementById("seconds").innerHTML = seconds;
                    document.getElementById("minutes").innerHTML = minutes;
                    document.getElementById("hours").innerHTML = hours;
                }, 1000);
            }
            function padDigits(number, digits) {
                return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number;
            }
        </script>
    </head>
    <<body onload="calctime()" >
        <form id="form1" runat="server">

                    <div style="width: 100%; text-align: center; font-size: 40px; font-weight: 900; color: black; background-color: white;">
                        Logon Reason Code:<br />
                        <div style="font-size: 60px;">
                            <asp:Label ID="hours" runat="server" style="color: red;"></asp:Label>
                            h
                            <asp:Label ID="minutes" runat="server" style="color: red;"></asp:Label>
                            m
                            <asp:Label ID="seconds" runat="server" style="color: red;"></asp:Label>
                            s
                        </div>
            <div>
                <asp:Label ID="HourLabel" runat="server" ></asp:Label>
                hh
                <asp:Label ID="MinuteLabel" runat="server" ></asp:Label>
                mm
                <asp:Label ID="SecondsLabel" runat="server" ></asp:Label>
                ss
                <br />
                <asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource1">
                    <ItemTemplate>
                        PriorInsert:
                        <asp:Label ID="PriorInsertLabel" runat="server" Text='<%# Bind("PriorInsert") %>' />
                        <br />
                        EPOCH_DATE:
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("EPOCH_DATE") %>' />
                        <br />

                    </ItemTemplate>
                </asp:FormView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MAS90ConnectionString %>" 
                                   SelectCommand="select dateadd(ss, -5000, GETDATE()) as PriorInsert,  
                                   DATEDIFF(s, '1970-01-01 00:00:00', dateadd(ss, -5000, GETDATE())) as EPOCH_DATE">
                </asp:SqlDataSource>
            </div>
        </form>
    </body>
</html>

Open in new window

0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
Sorry, I'm not up on the .NET side of things but I can help with the client side.  What I need you to do is post the rendered page.  Open that demo page in a browser, right click, view source, copy and paste here.  Be sure to wrap the code in code tags
0
 

Author Comment

by:sphilip951
Comment Utility
Rob,

Thanks for your reply.  I hope this helps you out.

<!DOCTYPE html>



<html xmlns="http://www.w3.org/1999/xhtml">
    <head><title>

</title>
        <script type="text/javascript">
            function calctime() {
                var sec = 0;
                function pad(val) {
                    return val > 9 ? val : "0" + val;
                }
                setInterval(function () {
                    var seconds = pad(++sec % 60);
                    var minutes = pad(parseInt(sec / 60, 10));
                    var hours = pad(parseInt((sec / 60) / 60, 10));
                    minutes = minutes - (hours * 60);
                    minutes = padDigits(minutes, 2);
                    document.getElementById("seconds").innerHTML = seconds;
                    document.getElementById("minutes").innerHTML = minutes;
                    document.getElementById("hours").innerHTML = hours;
                }, 1000);
            }
            function padDigits(number, digits) {
                return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number;
            }
        </script>
    </head>
    <<body onload="calctime()" >
        <form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="ht15UQEqvphgyWiCoNhIziBBXbdM/QzFYaFfC2pNvAB5Y7azotpyv3vIowRSZsUrQgpiiU103bhO1hdk2vRcBUFCXNePYWqbTvi95Wx82tHBeE+97UCOEuRSkxfRouFFjOMtJAHTEydNzPvBUlbwbff00yhhQLMYP0/y6HqMYSli8p18OJLKETS/JPcPDS6yQYwkJ9A3++ZRCHPqkOi3Mn0l++afytLZBxprO1F0d25WZWtVJhSxlDCQWMV4mJA6o26uNDdj9azM4kyNnSkCYTfZYNlLFjqgCYich6ngo0SHo614mVnm6bz8zVUx5ImYv18zSp0jNV1RfMiCDTRyHg==" />
</div>

<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="7FE6D151" />
</div>

                    <div style="width: 100%; text-align: center; font-size: 40px; font-weight: 900; color: black; background-color: white;">
                        Logon Reason Code:<br />
                        <div style="font-size: 60px;">
                            <span id="hours" style="color: red;"></span>
                            h
                            <span id="minutes" style="color: red;"></span>
                            m
                            <span id="seconds" style="color: red;"></span>
                            s
                        </div>
            <div>
                <span id="HourLabel"></span>
                hh
                <span id="MinuteLabel"></span>
                mm
                <span id="SecondsLabel"></span>
                ss
                <br />
                <table cellspacing="0" id="FormView1" style="border-collapse:collapse;">
	<tr>
		<td colspan="2">
                        PriorInsert:
                        <span id="FormView1_PriorInsertLabel">1/18/2015 1:37:54 PM</span>
                        <br />
                        EPOCH_DATE:
                        <span id="FormView1_Label1">1421588274</span>
                        <br />

                    </td>
	</tr>
</table>
                
            </div>
        </form>
    </body>
</html>

Open in new window

0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
See here for the demo http://jsbin.com/pogoji/1/edit?html,js,output

Is this showing the correct time for you?

javascript:
function pad(val) {
  return val > 9 ? val : "0" + val;
}

function calctime(old) {
  var now = new Date()*1; // milliseconds
  var sec = now - old*1000;
  setInterval(function () {
    sec++;

    var seconds = pad(sec % 60);
    var minutes = pad(parseInt(sec / 60 / 1000, 10));
    var hours = pad(parseInt((sec / 60) / 60 / 1000, 10));

    minutes = minutes - (hours * 60);
    minutes = padDigits(minutes, 2);

    $("#seconds").text(seconds);
    $("#minutes").text(minutes);
    $("#hours").text(hours);
  }, 1000);
}

function padDigits(number, digits) {
  return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number;
}

$(function() {
  var curTime = parseInt($('#FormView1_Label1').text());
  calctime(curTime);
});

Open in new window

0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

Author Comment

by:sphilip951
Comment Utility
Rob,

I don't want you to think I'm ignoring this.  I believe this is basing the date on GMT.  is there a parameter to put it into PST?  If not, I can subtract hours to get it to line up correctly.

It did load, but for some reason the minutes and hours are not updating on the .aspx side; only the seconds are.   The hours and minutes load on page refresh, but minutes to not add once seconds flip over 60.  Same with hours.

Unfortunately, I can't work on it anymore until tomorrow afternoon; But progress is being made.
0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
Comment Utility
try this version: http://jsbin.com/pogoji/2/edit?html,js,console,output

I've moved the calculation of the current date into the setInterval.  It now updates the minutes and hours.

As for the time itself, it can get quite confusing as the date Prior Insert date i'm assuming is PST, however the time that JS calculates will be the time on the client's machine.  So both need to be converted to UTC first and then back again as you'll never be sure of the client's timezone
0
 

Author Comment

by:sphilip951
Comment Utility
You are correct, had to convert them both to UTC.  Since I'm only after the hh:mm:ss I didn't bother converting them back.

Rob, I can't thank you enough.  I had honestly put days into trying to figure this out.  Here's the final working test page.


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script id="jsbin-javascript">
            function pad(val) {
                return val > 9 ? val : "0" + val;
            }

            function calctime(old) {
                setInterval(function () {
                    var now = new Date(); // milliseconds
                    //now = new Date(now.getTime() + now.getTimezoneOffset() * 60000);
                    var sec = now - old * 1000;
                    var seconds = pad(parseInt(sec / 1000 % 60));
                    var minutes = pad(parseInt(sec / 60 / 1000, 10));
                    var hours = pad(parseInt((sec / 60) / 60 / 1000, 10));

                    minutes = minutes - (hours * 60);
                    minutes = padDigits(minutes, 2);

                    $("#seconds").text(seconds);
                    $("#minutes").text(minutes);
                    $("#hours").text(hours);
                }, 1000);
            }

            function padDigits(number, digits) {
                return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number;
            }

            $(function () {
                var curTime = parseInt($('#FormView1_Label1').text());
                calctime(curTime);
            });
        </script>
        <title>

</title></head>
    <body >
        <form method="post" action="default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="tIT7PNq4FU4+bAhyXZYMLNDRuGQNuMDT1LjIkHr/3YhuE/dpfz1/haaMeoKzaUmfoOnbwPZah8QQUpQlF+g+fF2W/Xt/MPTCBwqt6E7GrawvJKhZ/XGEmubGQ7QPUcPaaxYLXAWQcbnsjaEpJTIHTVuk4DfLiX3HVxinDj4Ijn1Vm32yULoHQ/nbrLOOf1jLo8t42Nsyar/Z/ZnLNJ+0KMz1CgohGiKn9MoUTARwi6RJhXAJq4if9hNpebamqiKWorQBkezPwpjwiJnK1f0BBzY9BZUzdkEu127HUBOVjtA=" />
</div>

<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="7FE6D151" />
</div>
        
            <div style="width: 100%; text-align: center; font-size: 40px; font-weight: 900; color: black; background-color: white;">
                Logon Reason Code:<br />
                <div style="font-size: 60px;">
                    <span id="hours" style="color: red;"></span>
                    h
                    <span id="minutes" style="color: red;"></span>
                    m
                    <span id="seconds" style="color: red;"></span>
                    s
                </div>
                <div>
                    <table cellspacing="0" id="FormView1" style="border-collapse:collapse;">
	<tr>
		<td colspan="2">
                            EPOCH_DATE:
                            <span id="FormView1_Label1">1421574131</span>
                            <br />
                            
                        </td>
	</tr>
</table>
                    
                </div>
            </div>
        </form>
    </body>
</html>

Open in new window

0
 

Author Closing Comment

by:sphilip951
Comment Utility
Rob did a fantastic job helping me wrap this up.  I simply needed to take a date from a label and display how long it's been since that date to the users in hh:mm:ss format.

Thanks a bunch!!
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now