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

【问题标题】：Datetime Picker in asp.net datagrid textboxasp.net datagrid 文本框中的日期时间选择器
【发布时间】：2012-09-03 23:40:16
【问题描述】：

我在 asp.net 中使用 Datagrid 我的 TextBox 在 DataGrid 内。我想通过 jQuery 或 Ajax 在数据网格中单击文本框上的 datetimepicker

请帮帮我。

提前致谢。

【问题讨论】：

标签： jquery asp.net ajax datagrid

【解决方案1】：

给你jQuery UI DatePicker

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


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

在你的gridview的项目模板中分配类

【讨论】：

它应该在 DataGrid 中工作，因为插件的选择方法是基于类而不是基于 ID。
那只是日期选择器，我希望在 DataGrid 中的单个 asp.net 文本框中同时选择日期、时间
使用时间选择器插件。 Demo and download here

【解决方案2】：

这样试试

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

【讨论】：

那只是日期选择器，我希望在 DataGrid 中的单个 asp.net 文本框中同时选择日期、时间

【解决方案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>

【讨论】：

出现js错误：对象不支持该属性或方法

【解决方案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>

【讨论】：

请参考 nunespascal 给出的这篇文章，以获得更多选择器中的选项。 trentrichardson.com/examples/timepicker