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="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("[id$=txtProductDate]").datepicker({
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'http://jqueryui.com/demos/datepicker/images/calendar.gif'
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" 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>
</form>
</body>
</html>
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.
Downloads
You can download the sample source code using the download link provided below.
Download Code
