我有一个人员信息的数据库表,也有他们的出生日期.我正在使用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>
如果有任何疑问请问我谢谢.