Question

我有一个数据库表，其中的人员信息也有他们的出生日期。我正在使用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方法？如果是这样我怎么解决？我尝试在div内使用GridView，但它无效。

修改

下面是我放置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>

Answer 1

在此TextBox ID会注明工作，因为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>

如果有任何疑问请问我。

Answer 2

请检查文本框的ID，因为gridview id已更改。检查它的来源。

Answer 3

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

Answer 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

ASP.NET DatePicker在GridView中无法正常工作

4 个答案: