Ashish Patel

Assign datepicker to runtime/dynamic textboxes in ASP.NET using jQuery

In this short and simple article, we will see how to assign datepicker to runtime textboxes or dynamic textboxes using jQuery in ASP.NET.
Here is code to create three textboxes dynamically (programmatically)
Code behind:

protected void Page_Load(object sender, EventArgs e)
    {
        for (int b = 0; b < 3; b++)
        {
                TextBox txtdate = new TextBox();
                txtdate.ID = "dpicker" + b.ToString();
                txtdate.CssClass = "date";   // class date
                 PlaceHolder1.Controls.Add(txtdate);
            }
    }
&#91;/code&#93;
Here we created three textbox programmatically and assigned <strong>date</strong> to CssClass property of textbox. Now we going to use jQuery UI datepicker plugin to this created textbox class. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" >
</script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js" >
</script>
<script type="text/javascript">
    $(function () {
        $(".date").datepicker();
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
               <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
    </div>
    </form>
</body>
</html>

For more information about Datepicker, have a look my this article.
Thanks.

Posted in ASP.Net, JQueryTagged , , , , 5 Comments

5 responses to “Assign datepicker to runtime/dynamic textboxes in ASP.NET using jQuery”

  2. good example.. can provide and Jquery date picker which contains month in separate tab and year in separe tab.(no in drop down). so we can move month separately and year as well

    Reply

  3. good example.. can u pls provide and Jquery date picker which contains month in separate tab and year in separe tab.(no in drop down). so we can move month separately and year as well

    Reply

Leave a Reply