ASP.NET DatePicker 无法在 GridView 中工作

Question

ASP.NET DatePicker 无法在 GridView 中工作

Man*_*n C 4 c# asp.net jquery gridview datepicker

我有一个包含人员信息的数据库表，其中还有他们的出生日期。我用于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>

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

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

编辑

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

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

adi*_*ava 7

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

<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>

Run Code Online (Sandbox Code Playgroud)

在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>

Run Code Online (Sandbox Code Playgroud)

如果有任何疑问请问我谢谢。

归档时间：	9 年，3 月前
查看次数：	5258 次
最近记录：	9 年，3 月前