sphilip951
asked on
Timer to Display HH:MM:SS from a datetime Label in a FormView
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?
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>
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
ASKER
Rob,
Thanks for your reply. I hope this helps you out.
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>
See here for the demo http://jsbin.com/pogoji/1/edit?html,js,output
Is this showing the correct time for you?
javascript:
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);
});
ASKER
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.
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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>
ASKER
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!!
Thanks a bunch!!
ASKER
I'm begging someone to help me out
Open in new window