In this article I will explain how to apply the jQuery DatePicker Plugin to multiple Textboxes in ASP.Net GridView control.
HTML Markup
Below is the HTML markup of the page used for this sample.
<html xmlns="">
<head runat="server">
     <script src="" type="text/javascript"></script>
    <script src="" type="text/javascript"></script>
    <link href="" rel="Stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
                showOn: 'button',
                buttonImageOnly: true,
                buttonImage: ''
    <form id="form1" runat="server">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns = "false">
    <asp:BoundField DataField = "ProductName" HeaderText = "Product Name" />
    <asp:TemplateField HeaderText = "Product Date">
        <asp:TextBox ID="txtProductDate" runat="server" ReadOnly = "true"></asp:TextBox>
Above you will notice that I have a simple ASP.Net GridView with 2 columns
1. Product Name
2. Product Date – which contains an ASP.Net TextBox control with ID txtProductDate to which I’ll apply the jQuery DatePicker plugin
In the head section of the page I have added a jQuery document ready event in which I am applying the jQuery UI DatePicker plugin to all the GridView Textboxes whose ID matches the string txtProductDate using the jQuery Selector [id$=txtProductDate]. Since the ASP.Net GridView control repeats the textboxes it changes their ClientID hence I have used this LIKE selector so that it finds and applies the jQuery plugin to all textboxes.
You can download the sample source code using the download link provided below.