This is very easy to integrate a GridView control to Java Script Calender Control.

The code will be looking like this in GridView template.

In the gridview control every row in the grid view return the diffrent id for the calender control. We need to catch the calender id at runtime.

<asp:TemplateField SortExpression="Purchase_Dt" HeaderText="Purchase Date">
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle Wrap="False"/>
<EditItemTemplate>
<asp:TextBox ID="txt_Purchase_Dt" Width="100" Runat="server" Text='<%# Bind("Purchase_Dt","{0:dd/MM/yyyy}") %>'></asp:TextBox><asp:ImageButton ID="img_date" CommandName="img_date1" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" ImageUrl="~/cal.gif" runat="server" />
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtPurchase_Dt" runat="server" Width="100"></asp:TextBox><asp:ImageButton ID="img_date_Footer" CommandName="img_date_Footer" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" ImageUrl="~/cal.gif" runat="server" />
</FooterTemplate>
<ItemTemplate>
<asp:Label Runat="server" Text='<%# Bind("Purchase_Dt","{0:dd/MM/yyyy}") %>' ID="lbl_Purchase_Dt"></asp:Label>
</ItemTemplate>
</asp:TemplateField>


Then open the RowDataItem event of the Gridview control here we can get the ID of the calender control at runtime in grid view control.
The code looking like this.

protected void g1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowState == DataControlRowState.Edit || (e.Row.RowState == (DataControlRowState.Edit | DataControlRowState.Alternate)))
{
ImageButton i1 = (ImageButton)e.Row.FindControl("img_date");
TextBox t1 = (TextBox)e.Row.FindControl("txt_Purchase_Dt");
i1.Attributes.Add("OnClick", "return f1(" + t1.ClientID + ")");
}
else if (e.Row.RowType== DataControlRowType.Footer)
{
if (e.Row.RowState == DataControlRowState.Normal)
{
ImageButton i1 = (ImageButton)e.Row.FindControl("img_date_Footer");
TextBox t1 = (TextBox)e.Row.FindControl("txtPurchase_Dt");
i1.Attributes.Add("OnClick", "return f1(" + t1.ClientID + ")");
LinkButton L2 = (LinkButton)e.Row.Cells[0].FindControl("LinkButton2");
TextBox txt_AvalidQnty = (TextBox)e.Row.FindControl("txtLic_Avlbl_qty");
TextBox txt_PurDate = (TextBox)e.Row.FindControl("txtPurchase_Dt");
TextBox txt_SoftDesc = (TextBox)e.Row.FindControl("txtSoftware_Desc");
//TextBox t3 = (TextBox)e.Row.FindControl("txt_Lic_Avlbl_qty");
L2.Attributes.Add("OnClick", "return Validate(" + txt_SoftDesc.ClientID + "," + txt_PurDate.ClientID + "," + txt_AvalidQnty.ClientID + ")");
//TextBox txt_PurDate = (TextBox)e.Row.FindControl("txtPurchase_Dt");
//L2.Attributes.Add("OnClick", "return Validate_PurchaseDate(" + txt_PurDate.ClientID + ")");
//TextBox txt_SoftDesc = (TextBox)e.Row.FindControl("txtSoftware_Desc");
//L2.Attributes.Add("OnClick", "return Validate_SoftDesc(" + txt_SoftDesc.ClientID + ")");
}
}


The java function f1 code is following:


function f1(Object)
{
//alert(Object);
showCalendarControl(Object);
return false;
}

This function is the java script calender control

showCalendarControl(Object);

This is the code I have written in my application.