Display the current date in an ASP.NET label with C# and JS

Question

I'm trying to display the current date in an ASP.NET label using JavaScript and C#. Here's what I have:

C#:

protected void Page_Load(object sender, EventArgs e)
{
    Page.ClientScript.RegisterStartupScript(Type.GetType("System.String"), "addScript", "GetDate()", true);
}

JS:

<script type="text/javascript">
    function GetDate() 
    {
        var dt = new Date();
        var element = document.getElementById("MainContent_FormView1_Label1");

        element.text = dt.toDateString();
    }
</script>

ASP.NET:

<asp:Label ID="Label1" runat="server" Text='<%# Bind("Date", "{0:d}") %>'></asp:Label>

Can anyone see where I'm going wrong? Also, can the JS be run when the page loads without using the C# Page_Load method? I picked up the RegisterStartupScript elsewhere but I don't really understand it.

Thanks, Liam

score 3 · Accepted Answer · edited May 23 '17 at 12:23

3

Try using element.innerText = dt.toDateString(); instead.

Also, you don't need to use RegisterStartupScript. You can just call the getDate() function in the onLoad event.

<script type="text/javascript">

    window.onload = function(){
        getDate();
    };

    function getDate() 
    {
        var dt = new Date();
        var element = document.getElementById("MainContent_FormView1_Label1");

        element.text = dt.toDateString();
    }
</script>

However, you might want to read this SO thread for best practice in using window.onload, or consider using a framework such as jQuery and its document.ready

edited May 23 '17 at 12:23

Community

1
1

answered May 24 '11 at 10:09

Geoff Appleford

18,538
4
62
85

@Liam if Geoff's answer solved it you should mark it as the answer – Fishcake May 24 '11 at 10:16
@Liam. Thanks. You're right. There is a short time limit before you can accept answers... – Geoff Appleford May 24 '11 at 10:39

score 0 · Answer 2 · answered May 24 '11 at 10:13

0

Try this:

//C#
protected void Page_Load(object sender, EventArgs e)
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "addScript", "GetDate()", true);
}

//JS
<script type="text/javascript">
    function GetDate() 
    {
        var dt = new Date();
        var element = document.getElementById("<%# Label1.ClientID %>");

        element.innerHTML = dt.toDateString();
    }
</script>

//ASP.Net
<asp:Label ID="Label1" runat="server" Text=''></asp:Label>

answered May 24 '11 at 10:13

James Hill

60,353
20
145
161

Whenever I tried to use the <% Label1.ClientID %>, I got a "; expected" error on that line (not column number). Any idea why that is? – lmhrpr May 24 '11 at 10:32
@Liam, you forgot the pound sign. It's <%# Label1.ClientID %>, not <% Label1.ClientID %>. – James Hill May 24 '11 at 11:23

score 0 · Answer 3 · answered May 24 '11 at 10:15

0

You can change Your PageLoad to OnPreInit and also you can change your JS to

<script type="text/javascript">
 function GetDate()
  {
     document.getElementById('<%Label1.ClientID%>').value = new Date().toDateString(); 
 }
 </script>

answered May 24 '11 at 10:15

Nasser Hadjloo

12,312
15
69
100

Bharath · Answer 4 · 2011-05-24T11:09:37.473

0

You can simply set as

Label1.Text = DateTime.Now.ToString();

EDIT

If you don't want to set the DateTime in serverside. You can use the below code without any onload or RegisterStartupScript methods

<asp:Label ID="label1" runat="server" />

<!-- At the end of ASPX Page -->

<script type="text/javascript">
document.getElementById("MainContent_FormView1_Label1").innerHTML = new Date().toDateString()
</script>

edited May 24 '11 at 11:09

answered May 24 '11 at 10:18

Bharath

797
6
14

I'm using the Text attribute to bind this label to a database. I don't think I can use your solution at the same time. Thanks though. – lmhrpr May 24 '11 at 10:36

Sreekumar P · Answer 5 · 2011-05-24T11:55:42.440

You can use pagemethods , so that you can Display Time Eventually

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>jQuery to call page methods in ASP.NET</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js">  </script>
</head>
<body>
    <form id="Form1" runat="server">
    <asp:ScriptManager EnablePageMethods="true" ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <script type="text/javascript">
        $(document).ready(function() {

            setInterval(setTime, 1000);
            function setTime() {
                PageMethods.getTime(function(res) {
                    document.title = res;
                    $('#time').html(res);
                });
            };
        });
    </script>
    Time : <span id='time'></span>
    </form>
</body>
</html>

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {


    }
    [WebMethod]
    public static string getTime()
    {
        return DateTime.Now.ToString("hh:mm:ss tt");
    }

}

Display the current date in an ASP.NET label with C# and JS

5 Answers5