无法将日期选择器添加到 C# .NET gridview 单元格

Posted 2023-05-08

【中文标题】无法将日期选择器添加到 C# .NET gridview 单元格

【英文标题】：Cannot add datepicker to C# .NET gridview cell

【发布时间】：2016-09-07 07:40:04

【问题描述】：

我有一个使用 Web 窗体用 C# .Net 编写的网站。我有一个包含三列的网格视图，第一列是“日期”字段。我在 gridview 中添加了一个空白行，并将 EditIndex 设置为该行。我希望用户能够单击该可编辑的日期单元格并显示日期选择器日历。

我的代码： ASPX：

<asp:GridView ID="TaskGridViewAB" runat="server" 
    OnRowDataBound="GridView1_RowDataBound"
    OnRowUpdating="TaskGridViewAB_RowUpdating">
</asp:GridView>

我从 Oracle 数据库中获取此网格的数据。 我在结果中添加了一个空行（这一切都有效）：

sql = " - my SELECT statement - "
OracleCommand cmd = new OracleCommand(sql, Conn);
...
OracleDataAdapter oracleDataAdapter = new OracleDataAdapter(cmd);
//Add the blank row
DataRow NewRow = dt.NewRow();
dt.Rows.Add(NewRow);
//Fill the table with the SELECT results 
oracleDataAdapter.Fill(dt);

我认为这条线设置不正确：

string js = "$(function()  $('#" + TaskGridViewAB.ClientID + "').datepicker();  );";
ScriptManager.RegisterStartupScript(Page, this.GetType(), Guid.NewGuid().ToString(), js, true);

我也试过了——这也没用：

string js = "$(function()  $('#" + e.Row.Cells[0].ClientID + "').datepicker(); );";
ScriptManager.RegisterStartupScript(Page, this.GetType(), Guid.NewGuid().ToString(), js, true);

注意：我可以替换上面的两行并将日期选择器分配给我拥有的文本框并且确实可以工作，但是我需要 gridview 中的日历，而不是文本框：

string js = "$(function()  $('#" + txtDate.ClientID + "').datepicker(); );";
ScriptManager.RegisterStartupScript(Page, this.GetType(), Guid.NewGuid().ToString(), js, true);

任何帮助将不胜感激。我意识到有关于类似情况的类似询问，但我一直无法让它发挥作用。 谢谢。

【问题讨论】：

如果您使用的是 Gridview RowEditing，则在您进入编辑模式之前无法找到该文本框，然后必须在 RowEditing 事件中找到它

【参考方案1】：

我建议尝试更改选择器。与其试图找出生成的文本框的 ID，只需检查标记并了解该文本框的确切位置以及如何使用单个选择器来精确定位它。

例如，我将假设此文本框以最后一个tr 结尾，并且它是该行中唯一一个类型为text 的input。它可能不正确，但应该说明这个想法：

string js =
    "$(function() " +
        "$('#" + txtDate.ClientID + " tr:last')" +
        ".find('input[type=\"text\"]')" +
        ".datepicker();" +
    ");";

【讨论】：

在文本框中打开日期选择器不是问题。正如我所说，这很有效。我只写了文本框来验证我的 javascript 行格式是否正确。我不能做的是在我的 GridView 中打开日期选择器。

@CrazyCat，是的，我明白这一点。但是 datepicker 必须有一个要绑定的文本框，对吗？您在日期列中附加的可编辑行中创建该文本框。现在你需要从最后一行中选择那个文本框（同样，不是一个独立的，在 GridView 中的那个）并将 datepicker 绑定到它。答案是关于如何在不尝试获取文本框 id 的情况下执行此操作的建议。

【参考方案2】：

在将 JS/JQ 与 asp.net 控件结合使用时，我总是尝试使用静态 id 或 CSS 类名来定位元素。这比处理 id 名称修改要容易得多。

您没有发布 GridView aspx，所以我假设您正在自动生成列。

由于您使用的是 GridView 的行编辑功能，我会找到文本框并在 RowEditing 事件中追加或添加到 CssClass：

    txtData.CssClass += " dtpkr"  // the string 'dtpkr' is arbitrary

那么你可以在jq中这样做：

    $(".dtpkr").datepicker();