Step towards Dot Net: How to use JQuery Calendar in ASP.Net?

Asp.Net provides Server side calendar control but because it is server side so it is heavy weight. Instead of using Server side calendar control we can also use client side calendar control. Using client side functionality doesn’t make any overload for server because this functionality is handled by client side browser. And it is better practice to perform this kind of task in client side only so that server performance can be increased.

In this article, I am explaining, How to use JQuery Calendar in ASP.Net?

For this example I have used JQueryUI. Here first we need to embed this JQueryUI plugin in our application. To configure this, follow these my previous articles -

http://steptodotnet.blogspot.in/2012/06/auto-complete-textbox-using-jquery-and.html
http://steptodotnet.blogspot.in/2011/12/jquery-popup-window-in-aspnet.html

Here you will get How to add JQueryUI plugin to the project. After adding JQuery plug-in see this code-

.aspx code-

<head id="Head1" runat="server">
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
    <link href="Css/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
    <title>Auto complete TextBox</title>
    <script type="text/javascript">
    function ShowCalendar() {
            $("#<%=txtDOJ.ClientID%>").datepicker({
                changeMonth: true,
                changeYear: true
            });
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    Enter date of joining:
                </td>
                <td>
                    <asp:TextBox ID="txtDOJ" runat="server"></asp:TextBox>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>

Here I have defined on client side function- ShowCalendar(), In this function I am binding JQuery Calendar to Server side TextBox. For binding JQuery Calendar to server side TextBox, I have used ClientID of TextBox, like this-

$("#<%=txtDOJ.ClientID%>")

In this example, I have added only 2 parameter to Calendar -

changeMonth
changeYear

based on calendar view, we can add more options to it.

.cs code-

protected void Page_Load(object sender, EventArgs e)
    {
        txtDOJ.Attributes.Add("onfocus", "ShowCalendar();");
    }

In this code, I am binding defined client side function to TextBox. For binding client side event to TextBox, I have used Attributes.Add() method, In Add() method I have passed "onfocus" as client side event and "ShowCalendar()" as client side function.

Now done, when you will set focus on TextBox then output will be like this-

JQuery plug-in have different properties or method to display calendar in different format based on our requirement it can be set. For this we need to set these options while configuring calendar to any textbox, here we can pass parameter for this.

Note-

For using client side functionality it is must that browser should support this functionality and client script for browser is also true otherwise this functionality will not work.

Thanks

Step towards Dot Net

Pages

Tuesday, June 19, 2012

How to use JQuery Calendar in ASP.Net?

1 comment: