Question

我在asp.net中使用Datagrid 我的TextBox位于DataGrid中。我想在textbox上通过jQuery或Ajax

单击datagrid来获取datetimepicker

请帮帮我。

提前致谢。

Answer 1

<script>
  $(function() {
    $( ".datepicker" ).datepicker();
  });
</script>


<input class="datepicker" type="text" runat="server">

在gridview的项目模板中分配课程

Answer 2

试试这个

$(document).ready(function(){
       ("#textbox_id").datepicker({dateFormat: "yy-mm-dd hh:mm:ss"});
   })

Answer 3

检查此示例。

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataGrid.aspx.cs" Inherits="DataGrid" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    <asp:GridView ID="gvItems" runat="server">
        <Columns>
            <asp:TemplateField HeaderText="Date">
            <ItemTemplate>
                <asp:TextBox runat="server" id="txtDate" CssClass="txtDate">
                </asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".txtDate").datepicker();
    });

    </script>
    </form>
</body>
</html>

Answer 4

试试这个并测试它应该有效。

在您的代码隐藏中。

// Property which will hold your script
protected String Script
{
        get;
        set;
}

您将绑定数据的代码隐藏。

Script = String.Empty;
uxGrid.DataSource = WebApplication1.DummyData.GetTempDataTable();
uxGrid.DataBind();
Script = "$(document).ready(function () { " + Script + " });";
Page.ClientScript.RegisterStartupScript(this.GetType(), "DateTimeView", Script.ToString(), true);

网格项绑定事件。（代码隐藏）

protected void uxGrid_ItemDataBound(object sender, DataGridItemEventArgs e)
{
        TextBox txt = (TextBox)e.Item.FindControl("uxDTP");        
        if (txt != null)
        {
            Script += RegisterClientScriptDateTimeView(txt.ClientID);
        }
}

public string RegisterClientScriptDateTimeView(string controlId)
{
    StringBuilder script = new StringBuilder("");
    script.AppendFormat(" $('#{0}').datetimepicker();", controlId);
    return script.ToString();
}

在您的aspx设计文件中：

<asp:DataGrid ID="uxGrid" runat="server" CellPadding="4" ForeColor="#333333" 
            GridLines="None" onitemdatabound="uxGrid_ItemDataBound" AutoGenerateColumns="false" >
            <Columns>
                <asp:TemplateColumn>
                    <ItemTemplate>
                        <asp:TextBox runat="server" ID="uxDTP" TextMode="SingleLine"></asp:TextBox>

                    </ItemTemplate>
                </asp:TemplateColumn>
            </Columns>           
        </asp:DataGrid>

在脚本管理器或aspx页面中包含此脚本：

<asp:ScriptManager runat="server" ID="uxScriptManager" LoadScriptsBeforeUI="true">
        <Scripts>
            <asp:ScriptReference Path="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" />
            <asp:ScriptReference Path="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" />
            <asp:ScriptReference Path="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js" />
        </Scripts>
    </asp:ScriptManager>

asp.net datagrid文本框中的日期时间选择器

4 个答案: