ASP.NET DatePicker 在 GridView 中不起作用
Posted
技术标签:
【中文标题】ASP.NET DatePicker 在 GridView 中不起作用【英文标题】：ASP.NET DatePicker not working inside 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>
【问题讨论】：
检查控制台是否有任何错误？ 不，我没有收到任何错误 【参考方案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 相结合的回发和更新
【讨论】：
以上是关于ASP.NET DatePicker 在 GridView 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
jquery datepicker和asp.net c#空值
在 asp.net Ajax 调用后运行 javascript 以重新绑定 datepicker
在asp.net c#中的datepicker中使用数据库日期