ASP.NET DatePicker 在 GridView 中不起作用答案

【问题标题】：ASP.NET DatePicker not working inside GridViewASP.NET DatePicker 在 GridView 中不起作用
【发布时间】：2017-02-24 15:29:31
【问题描述】：

我有一个包含个人信息的数据库表，其中还有他们的出生日期。我使用GridView 来显示字段并使用列编辑和删除选项。要使用DatePicker 编辑日期即时消息，如下所示，

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Home Page</title>
<link rel='stylesheet' type='text/css' href='Styles/Main.css'/>
<script type="text/javascript" src="Scripts/jquery-1.12.4.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#text_date').datepicker({
            dateFormat: 'dd-mm-yy',
            inline: true,
            showOtherMonths: true,
            changeMonth: true,
            changeYear: true,
            constrainInput: true,
            firstDay: 1,
            navigationAsDateFormat: true,
            showAnim: "fold",
            yearRange: "c-100:c+10",
            dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        });
    });
    $(document).ready(function () {
        $('#text_dateadd').datepicker({
            dateFormat: 'dd-mm-yy',
            inline: true,
            showOtherMonths: true,
            changeMonth: true,
            changeYear: true,
            constrainInput: true,
            firstDay: 1,
            navigationAsDateFormat: true,
            showAnim: "fold",
            yearRange: "c-100:c+10",
            dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        });
    });
</script>
</head>

在列内的GridView 内，我有以下内容。我使用页脚区域将新数据插入GridView

<asp:TemplateField HeaderText="Date of Birth" SortExpression="DOB">
<EditItemTemplate>
    <asp:TextBox ID="text_date" CssClass="textbox" MaxLength="10" runat="server" Text='<%# Bind("DOB", "{0:dd/MM/yyyy}") %>'></asp:TextBox>    
</EditItemTemplate>
<ItemTemplate>
    <asp:Label ID="label_date" runat="server" Text='<%# Bind("DOB", "{0:dd/MM/yyyy}") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
    <asp:TextBox ID="text_dateadd" CssClass="textbox" MaxLength="10" runat="server" Text='<%# Bind("DOB", "{0:dd/MM/yyyy}") %>'></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>

但这不起作用，我尝试单击 EditItemTemplate 和 ItemTemplate 中的文本字段，但日历不会显示。我在一个简单的网页上试过，如下所示，它可以工作，

<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="text_date" CssClass="textbox" MaxLength="10" runat="server"></asp:TextBox>
    </div>
</form>

在一个普通的div 中，日期选择器可以工作，但在上面的GridView 中它不会工作.. 我做错了什么吗？是因为Bind 方法吗？如果是这样，我该如何解决？我也尝试在GridView 中使用div，但它不起作用。

编辑

下面是我放置gridview的地方。我在表格的单元格中使用我的网格视图，并且我还有脚本管理器和更新面板

<asp:TableCell ColumnSpan="6" Width="100%" Height="100%" VerticalAlign="Middle" HorizontalAlign="Center">
    <asp:UpdatePanel ID="update_data" runat="server">
        <ContentTemplate>
            <asp:GridView></asp:GridView>
        </ContentTemplate>
    </asp:UpdatePanel>
<asp:/TableCell>

【问题讨论】：

检查控制台是否有任何错误？
不，我没有收到任何错误

标签： c# jquery asp.net gridview datepicker

【解决方案1】：

在此TextBoxid 会注意到工作，因为GridView 将更改 id 并将其添加到特定的 id 与它实际 TextBox Id 所以试试这个它会工作

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Home Page</title>
<link rel='stylesheet' type='text/css' href='Styles/Main.css'/>
<script type="text/javascript" src="Scripts/jquery-1.12.4.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.Add-text').datepicker({
            dateFormat: 'dd-mm-yy',
            inline: true,
            showOtherMonths: true,
            changeMonth: true,
            changeYear: true,
            constrainInput: true,
            firstDay: 1,
            navigationAsDateFormat: true,
            showAnim: "fold",
            yearRange: "c-100:c+10",
            dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        });
    });
    $(document).ready(function () {
        $('.Add-text-new').datepicker({
            dateFormat: 'dd-mm-yy',
            inline: true,
            showOtherMonths: true,
            changeMonth: true,
            changeYear: true,
            constrainInput: true,
            firstDay: 1,
            navigationAsDateFormat: true,
            showAnim: "fold",
            yearRange: "c-100:c+10",
            dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        });
    });
</script>
</head>

在 GridView 的列中，我刚刚添加了新的类来识别，jquery 或 javascript 现在可以轻松识别它。

<asp:TemplateField HeaderText="Date of Birth" SortExpression="DOB">
<EditItemTemplate>
    <asp:TextBox ID="text_date" CssClass="textbox Add-text" MaxLength="10" runat="server" Text='<%# Bind("DOB", "{0:dd/MM/yyyy}") %>'></asp:TextBox>    
</EditItemTemplate>
<ItemTemplate>
    <asp:Label ID="label_date" runat="server" Text='<%# Bind("DOB", "{0:dd/MM/yyyy}") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
    <asp:TextBox ID="text_dateadd" CssClass="textbox Add-text-new" MaxLength="10" runat="server" Text='<%# Bind("DOB", "{0:dd/MM/yyyy}") %>'></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>

如果有什么问题可以问我谢谢。

【讨论】：

然后在你的TextBox中使用ClientIDMode="Static"
但我尝试了同样的方法..使用 CssClass 并且当我单击文本框时日期选择器不会显示
好的，我知道了，现在试试你的<asp:TextBox ID="text_date" CssClass="textbox Add-text" MaxLength="10" runat="server" Text='<%# Bind("DOB", "{0:dd/MM/yyyy}") %>' ClientIDMode="Static"></asp:TextBox>
在 javascript 中我必须在使用 ClientIDMode="Static" 时提供 $('.Add-text').datepicker() 或 $('#text_date').datepicker()？
使用你的id然后试试

【解决方案2】：

请检查文本框的 ID，因为在 gridview 中 ID 已更改。检查它查看源代码。

【讨论】：

我在GridView和DatePicker中提到了同一个ID
在您的网页中按 F12 键并检查控件的 ID。使用类代替 ID，还有其他方法，但那很丑

【解决方案3】：

在 asp.net 中的字段上添加一个类，因为 ID 将动态创建并在 HTML 中更改。代替$('#text_dateadd') 使用$('.dateadd')

【讨论】：

执行后如果您使用母版页然后如果您检查其 id 后缀 somthing ct1000_ 等
这就是为什么我说添加一个 css 类或在 JS 代码中使用它 $('#' ) , 尝试此选项后使用 CSS 干净易读
课程也无法正常工作...我应该添加什么来代替ContentPlaceHolder1？你能给我正确的代码格式来用我的代码添加这个 FindControl 脚本吗？
分享你的代码，contentplaceholder id 是什么？
我已经编辑了我的问题..在表格单元格和更新面板中添加了GridView 位置..

【解决方案4】：

解决方案

终于有办法了。

问题不在于GridView，实际上是因为使用了AutoPostBack 和UpdatePanel。 ASP.NET Ajax 和JQuery 好像不能正常一起使用。因此，此链接Conflicts between ASP.NET UpdatePanel and JQuery

中提供了不同的解决方案

那里提供了三种方法，对于我的应用程序方法 2 工作正常，我们必须添加一个函数 pageLoad()，如下所示，

<script type="text/javascript">
    function pageLoad() {
        $(document).ready(function () {
            $('#text_date').datepicker({
                dateFormat: 'dd-mm-yy',
                inline: true,
                showOtherMonths: true,
                changeMonth: true,
                changeYear: true,
                constrainInput: true,
                firstDay: 1,
                navigationAsDateFormat: true,
                showAnim: "fold",
                yearRange: "c-100:c+10",
                dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
            });
        });
    }
</script>

这适用于所有TextBox 与DatePicker 相结合的回发和更新

【讨论】：