微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

c# – ASP.NET DatePicker在GridView中不起作用

我有一个人员信息的数据库表,也有他们的出生日期.我正在使用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','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>

解决方法

在这个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','Sat']
        });
    });
    $(document).ready(function () {
        $('.Add-text-new').datepicker({
            dateFormat: 'dd-mm-yy','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: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>

enter image description here


enter image description here

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐