In this article I will explain with an example, how to implement the jQuery DatePicker (Calendar) with GridView control in ASP.Net using C# and VB.Net.
 
 

HTML Markup

Inside the HTML, the following CSS script file is inherited.
1. jquery-ui.css
And then, the following JS files are inherited.
1. jquery.min.js
2. jquery-ui.js
The following HTML Markup consists of:
GridView – For displaying data.

Columns

The GridView consists of one BoundField columns and one TemplateField column.
TemplateField
The TemplateField column consists of ItemTemplate and ItemTemplate which contains TextBox control.
The TextBox has been assigned with following property:
ReadOnly – For preventing users from editing.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<asp:GridView ID="gvProducts" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product Name" />
        <asp:TemplateField HeaderText="Product Date">
            <ItemTemplate>
                <asp:TextBox ID="txtProductDate" runat="server" ReadOnly="true"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
 
 

Applying jQuery UI DatePicker Plugin to ASP.Net TextBox

Inside the jQuery document ready event handler, the TextBox has been applied with the jQuery DatePicker plugin.
The jQuery DatePicker plugin has been assigned with the following properties:
showOn – button
For showing jQuery DatePicker only when the Button next to the TextBox is clicked.
buttonImageOnly – true
This indicates that the Image will be a Button.
buttonImage – URL
The path of the Image file to be displayed as Button.
<script type="text/javascript">
    $(function () {
        $("[id$=txtProductDate]").datepicker({
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: 'images/calendar.png'
        });
    });
</script>
 
 

Namespaces

You will need to import the following namespace.
C#
using System.Data;
 
VB.Net
Imports System.Data
 
 

Populating GridView

Inside the Page_Load event handler, an object of DataTable is created.
Then, two columns and three rows are added where each row defines the position of Row.
Finally, the GridView is populated.
C#
protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    dt.Columns.Add("ProductName");
    dt.Columns.Add("ProductDate");
    dt.Rows.Add();
    dt.Rows.Add();
    dt.Rows.Add();
    dt.Rows[0]["ProductName"] = "Watches";
    dt.Rows[1]["ProductName"] = "Bags";
    dt.Rows[2]["ProductName"] = "Shirts";
    gvProducts.DataSource = dt;
    gvProducts.DataBind();
}
 
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    Dim dt As DataTable = New DataTable()
    dt.Columns.Add("ProductName")
    dt.Columns.Add("ProductDate")
    dt.Rows.Add()
    dt.Rows.Add()
    dt.Rows.Add()
    dt.Rows(0)("ProductName") = "Watches"
    dt.Rows(1)("ProductName") = "Bags"
    dt.Rows(2)("ProductName") = "Shirts"
    gvProducts.DataSource = dt
    gvProducts.DataBind()
End Sub
 
 

Screenshot

Implement jQuery DatePicker Plugin in ASP.Net GridView Control
 
 

Downloads

Download Code