Question

如何在点击图片时设置费用日期列的日期选择器。

我在该列中使用图片，但是当我点击该图片时，它没有显示日期选择器。我怎么能这样做？

这是我的代码 -

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

任何帮助都将不胜感激。

Answer 1

您的旧代码（更改） -

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

您的新代码

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

如何制作gridview列的datepicker

1 个答案: