I was showed how to countdown and show controls on a webpage based on the set Date and Time, it worked.
When the set Date and time reached, the controls are displayed but after that the timer stops counting to the end Date and time.
I want a situation that when the event starts and the controls are showed, the timer will still be counting to the Date and Time when the event will end and when the event reaches the end Date and Time, the controls will hide again.
I tried to see if I can fiddle with the code so that when the set Date and Time for event ends, the controls will be hidden.
C#
protected void timer1_Tick(object sender, EventArgs e)
{
hidecontrols();
}
private void hidecontrols()
{
DataTable dt = new DataTable();
dt.Columns.Add("UserId");
dt.Columns.Add("EventName");
dt.Columns.Add("Event_URL");
dt.Columns.Add("StartDate");
dt.Columns.Add("EndDate");
dt.Rows.Add(1, "Board of Directors", "http://localhost:60223/vote.aspx?id=dAFBBsw9", "2021-09-27 22:30", "2021-09-27 22:32");
DataSet ds = new DataSet();
ds.Tables.Add(dt);
if (ds.Tables[0].Rows.Count > 0)
{
DateTime startTime = Convert.ToDateTime(ds.Tables[0].Rows[0][3].ToString());
DateTime endTime = Convert.ToDateTime(ds.Tables[0].Rows[0][4].ToString());
if (startTime > DateTime.Now)
{
controls.Visible = false;
LabelTime.Text = CalculateT(DateTime.Now, startTime);
Div1.Visible = true;
Div2.Visible = false;
}
else if(endTime > startTime) //I tried to see if I can use "else if" to make the timer count the duration for the event
{
controls.Visible = true;
lblTime.Text = CalculateT(startTime, endTime);
Div1.Visible = false;
Div2.Visible = true;
}
else
{
controls.Visible = false;
Div1.Visible = true;
Div2.Visible = false;
// LabelTime.Text = CalculateT(endTime);
}
}
}
public string CalculateT(DateTime startTime, DateTime endTime)
{
int days = 0; int hours = 0; int mins = 0; int secs = 0;
string finalTime = string.Empty;
if (endTime > startTime)
{
days = (endTime - startTime).Days;
hours = (endTime - startTime).Hours;
mins = (endTime - startTime).Minutes;
secs = (endTime - startTime).Seconds;
finalTime = string.Format("{0} days {1} hours {2} mins {3} secs", days, hours, mins, secs);
}
return finalTime;
}
Here is my HTML
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Timer ID="timer1" runat="server" OnTick="timer1_Tick" Interval="1000"></asp:Timer>
<div class="wrapper">
<div id="Div1" runat="server" class="alert alert-success" style="text-align: center; font-family: Roboto; width: 100%; margin: 0 auto; padding: 0px; font-size: 11pt;">
<label style="color: #002335; font-size: 13pt; font-weight: 400; font-family: Roboto;" id="Label3" runat="server">Your Event will start in</label>
<asp:Label ID="LabelTime" runat="server" Text="" />
<br />
</div>
<div id="Div2" runat="server" class="alert alert-success" style="text-align: center; font-family: Roboto; width: 100%; margin: 0 auto; padding: 0px; font-size: 11pt;">
<label style="color: #002335; font-size: 13pt; font-weight: 400; font-family: Roboto;" id="Label1" runat="server">Your Event will End in</label>
<asp:Label ID="lblTime" runat="server" />
<br />
</div>
<asp:Panel ID="controls" runat="server">
Name:
<asp:TextBox runat="server" ID="txtName" /><br />
Age:
<asp:TextBox runat="server" ID="txtAge" />
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>