There are several answers to the question of how to implement the use of JQuery UI datepicker with multiple text boxes on the same page but none of these post seem to address the issue where you have multiple text boxes within multiple ASP.NET gridviews on the same page. For reference purposes, below is what I have now for binding one column from one gridview to the datepicker. The second GridView (TrainingsGridView) shown below has two columns that I want to setup with datepicker and the first gridview (CertificationsGridView) has one column that is already setup and working with datepicker
What you see below is a solution I found on line, adapted to my web application.
<asp:GridView ID="CertificationsGridView" runat="server" style="clear:left" DataKeyNames="ID,EmployeeID,CertificationID" OnRowDataBound="CertificationsGridView_RowDataBound" CellPadding="5" AutoGenerateColumns="False" PageSize="15" OnRowCommand="CertificationsGridView_RowCommand" Width="600px" OnRowCancelingEdit="CertificationsGridView_RowCancelingEdit" OnRowEditing="CertificationsGridView_RowEditing" OnRowUpdating="CertificationsGridView_RowUpdating" OnRowDeleting="CertificationsGridView_RowDeleting" >
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" Visible="False" />
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" SortExpression="EmployeeID" Visible="False" />
<asp:BoundField DataField="CertificationID" HeaderText="CertificationID" SortExpression="CertificationID" Visible="False" />
<asp:BoundField DataField="Certification" HeaderText="Certification" SortExpression="Certification" ReadOnly="True" >
</asp:BoundField>
<asp:TemplateField HeaderText="Renewal Date" SortExpression="RenewalDate">
<EditItemTemplate>
<asp:TextBox ID="DateTimeValue" runat="server" class="datefield" Text='<%# Bind("RenewalDate", "{0:M-dd-yyyy}") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="RenewalDateLbl" runat="server" Text='<%# Bind("RenewalDate", "{0:M-dd-yyyy}") %>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="100px" />
</asp:TemplateField>
<asp:CommandField HeaderText="Edit/Delete" ShowDeleteButton="True" ShowEditButton="True" UpdateText="Save">
<ItemStyle Width="100px" />
</asp:CommandField>
</Columns>
</asp:GridView>
<script src="Scripts/jquery-2.0.3.js"></script>
<script src="Scripts/jquery-ui-1.10.4.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindPicker);
bindPicker();
});
function bindPicker()
{
var table = document.getElementById("CertificationsGridView");
table = certsTable;
certificationTable = true;
var currentDate;
if (table != null && table.rows.length > 0)
{
//loop the gridview table
for (var i = 1; i < table.rows.length; i++)
{
//get all the input elements
var inputs = table.rows[i].getElementsByTagName("input");
for (var j = 0; j < inputs.length; j++)
{
//get the textbox1
if (inputs[j].id.indexOf("DateTimeValue") > -1)
{
currentDate = inputs[j].value;
break;
}
}
}
}
if (currentDate != null)
{
$("input[type=text][id*=DateTimeValue]").datepicker({ dateFormat: "m-d-yy" });
var parsedDate = $.datepicker.parseDate('m-d-yy', currentDate);
$("input[type=text][id*=DateTimeValue]").datepicker("setDate", parsedDate);
}
else
{
$("input[type=text][id*=DateTimeValue]").datepicker();
}
}
</Script>
<asp:GridView ID="TrainingsGridView" runat="server" style="clear:left" OnRowDataBound="TrainingsGridView_RowDataBound" CellPadding="5" AutoGenerateColumns="False" PageSize="15" OnRowCommand="TrainingsGridView_RowCommand" Width="900px" OnRowCancelingEdit="TrainingsGridView_RowCancelingEdit" OnRowEditing="TrainingsGridView_RowEditing" DataKeyNames="ID,EmployeeID,TrainingID" OnRowUpdating="TrainingsGridView_RowUpdating" OnRowDeleting="TrainingsGridView_RowDeleting" >
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" Visible="False" />
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" SortExpression="EmployeeID" Visible="False" />
<asp:BoundField DataField="TrainingID" HeaderText="TrainingID" SortExpression="TrainingID" Visible="False" />
<asp:TemplateField HeaderText="Training Description" SortExpression="Training">
<%--This Editable field is for the actual Training item--%>
<EditItemTemplate>
<asp:DropDownList ID="TrainingDescriptionDDL" runat="server" style="width:100%" DataSource='<%#RetrieveTrainingsDataSource() %>' DataTextField="TrainingDescription" DataValueField="TrainingID" SelectedValue=<%#Bind("TrainingID")%>></asp:DropDownList>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="TrainingDescriptionLbl" runat="server" Text='<%# Bind("TrainingDescription") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Hours of</br>Training" SortExpression="NumberOfHours">
<%--This Editable field is for the number of hours of Training--%>
<EditItemTemplate>
<asp:TextBox ID="HoursOfTrainingTBX" runat="server" Text='<%# Bind("NumberOfHours") %>' columns="4" MaxLength="4" onkeypress="return isNumber(event)" ></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="HoursOfTrainingLbl" runat="server" Text='<%# Bind("NumberOfHours") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Date of</br>Training" SortExpression="DateOfTraining">
<%--This Editable field is for (last) Date of Training--%>
<EditItemTemplate>
<asp:TextBox ID="DateOfTrainingTBX" runat="server" class="datefield" Text='<%# Bind("DateOfTraining", "{0:M-dd-yyyy}") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="DateOfTrainingLbl" runat="server" Text='<%# Bind("DateOfTraining", "{0:M-dd-yyyy}") %>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="100px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Expiration" SortExpression="Expiration">
<%--This Editable field is for whether or not this Training has an expiration--%>
<EditItemTemplate>
<asp:DropDownList ID="ExpirationDDL" runat="server" style="width:60px" DataSource='<%#RetrieveExpirationOptionsDataSource() %>' DataTextField="ExpirationDescription" DataValueField="Expiration" SelectedValue=<%#Bind("Expiration")%>></asp:DropDownList>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="ExpirationLbl" runat="server" Text='<%# ((Boolean.Parse(Eval("Expiration").ToString())) ? "Yes" : "No") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Date Training</br>Expires" SortExpression="DateTrainingExpires">
<%--This Editable field is for Date this Training expires--%>
<EditItemTemplate>
<asp:TextBox ID="DateTrainingExpiresTBX" runat="server" Text='<%# Bind("DateTrainingExpires", "{0:M-dd-yyyy}") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="DateTrainingExpiresLbl" runat="server" Text='<%# Bind("DateTrainingExpires", "{0:M-dd-yyyy}") %>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="100px" />
</asp:TemplateField>
<asp:CommandField HeaderText="Edit/Delete" ShowDeleteButton="True" ShowEditButton="True" UpdateText="Save">
<ItemStyle Width="100px" />
</asp:CommandField>
</Columns>
</asp:GridView>
