How to make gridview column datepicker - asp.net

Question

How can I make my Expense Date column datepicker on clicking Image.
I am using image in that column but when I am clicking that Image it is not showing date picker.
How can I do this ?
Here is my code-
Default.aspx-
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="EditExpenses.aspx.cs" Inherits="EditExpenses" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" type="text/css"/>
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/jscript"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" type="text/jscript"></script>
<link rel="stylesheet" href="/resources/demos/style.css" type="text/css"/>
<script type="text/javascript">
$(function () {
$("#<%= GridView1.ClientID %>").datepicker();
});
</script>
<style type="text/css">
.hiddencol
{
display:none;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h3>Edit Expenses</h3>
<div align="center">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="SqlDataSource1" AllowPaging="True" AllowSorting="True"
AutoGenerateEditButton="True" onrowcreated="GridView1_RowCreated">
<Columns>
<asp:BoundField DataField="ExpenseId" HeaderText="Expense Id"
SortExpression="Expense_Id" ApplyFormatInEditMode="False"/>
<asp:BoundField DataField="Expense_Category" HeaderText="Expense Category"
SortExpression="Expense_Category" ApplyFormatInEditMode="True"
/>
<asp:BoundField DataField="Expense_Description"
HeaderText="Expense Description" SortExpression="Expense_Description"
ApplyFormatInEditMode="True" />
<asp:TemplateField HeaderText="Expense Date"
SortExpression="Expense_Date" >
<ItemTemplate>
<asp:Label ID="lblEffDate" runat="server" Text='<%#Bind("Expense_Date","{0:MM/dd/yyyy}") %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ClientIDMode="Static" ID="txtEffDate" runat="server" readonly="true" Text='<%#Bind("Expense_Date","{0:MM/dd/yyyy}") %>' />
<img alt="Calendar" id="calender1" src="Image/calender.jpeg" height="10" width="10" style="cursor: pointer;" onclick="javascript: NewCssCal('txtEffDate')" />
</EditItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Amount" HeaderText="Amount"
SortExpression="Amount" ApplyFormatInEditMode="True"
/>
</Columns>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:testAzharConnectionString %>"
SelectCommand="SELECT ExpenseId, Expense_Category, Expense_Description, Amount, Expense_Date FROM [CompanyExpenses3]"
UpdateCommand="Update [CompanyExpenses3] SET Expense_Category=#Expense_Category, Expense_Description=#Expense_Description,Expense_Date=#Expense_Date, Amount=#Amount WHERE ExpenseId=#ExpenseId"
OnUpdated="OnDSUpdatedHandler"></asp:SqlDataSource>
</asp:Content>
Default.aspx.cs-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class EditExpenses : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
public void OnDSUpdatedHandler(Object source, SqlDataSourceStatusEventArgs e)
{
}
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Cells[1].CssClass = "hiddencol";
}
if (e.Row.RowType == DataControlRowType.Header)
{
e.Row.Cells[1].CssClass = "hiddencol";
}
}
}
Any help'll be appreciated.

Answer 1

Your old code(change it)-
<script type="text/javascript">
$(function () {
$("#<%= GridView1.ClientID %>").datepicker();
});
</script>
Your new code-
<script type="text/javascript">
$(document).ready(function(){
$("#txtEffDate").datepicker();
});