如何使gridview列datepicker

Question

如何使我的費用日期列datepicker點擊圖像。

我在該列中使用圖像，但是當我點擊該圖像時，它不顯示日期選擇器。 我該怎麼做？

這裏是我的代碼 -

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"; 
      } 
    } 
} 

任何help'll是的欣賞編輯。

Answer 1

你的舊代碼（修改） -

<script type="text/javascript"> 
    $(function() { 
     $("#<%= GridView1.ClientID %>").datepicker(); 
    }); 
</script> 

你的新代碼 -

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#txtEffDate").datepicker(); 
});