[RESOLVED]Accessing Asp.Net Calendar Control from jQuery

Hello everyone and thanks for your help in advance.  I am new to jQuery and wanted to know how to access the Asp.Net calendar control with jQuery.  Any help would be appreciated.

Helloo kmcnet,

I suppose that you use ASP.NET web forms.

It depend of which task you want to achieve with access to calendar.

Example, following code will create alert message if you click on calendar:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $("#Calendar1").click(function () {
                alert("You click on calendar!");
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
    </div>
    </form>
</body>
</html>

For more information about how JQuery work follow:

http://www.w3schools.com/jquery/default.asp

ASP.NET render calendar like table element. Best way is to go to inspect element and see how it looks from html perspective and than you can determine what you want.

Also, with this code you will retrieve value of current clicked day:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $("#Calendar1 a").click(function () {
                alert($(this).text());
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
    </div>
    </form>
</body>
</html>

Hi kmcnet,

Thanks for your post.

As for your problem, you could refer to ivan’s sample access calendar control. Besides, you could refer to the following code to get
SelectedDate of calendar.

<head runat="server">
    <title></title>
    <script src="../../Scripts/jquery-1.8.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btngetdate").click(function () {
                var date ='<%= Calendar1.SelectedDate %>';
                alert(date);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
            <br />
            <input id="btngetdate" type="button" value="GetDate" />
        </div>
    </form>
</body> 

Hope it will be helpful to you.

Best Regards,

Fei Han

Leave a Reply