datepicker 在 IE11 中不显示日历
Posted
技术标签:
【中文标题】datepicker 在 IE11 中不显示日历【英文标题】：datepicker not showing calendar in IE11 【发布时间】：2019-09-26 22:28:36 【问题描述】：我目前在 IE11 中使用 datepicker 时遇到了一些问题。 当我单击我的文本框时，它至少可以在文本框的右端显示一个“x”以删除其内容。但是日历本身没有显示。
当我尝试使用 textmode="DATE" 而不是 jquery 数据选择器时，它得到了相同的最终结果。 我正在使用主/内容布局，并且 jquery 导入位于母版页上。
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<br /><br /><br />
<script type="text/html">
$(document).ready(function ()
$("#<%= DisplayFromDateTextBox.ClientID %>").datepicker();
$("#<%= DisplayToDateTextBox.ClientID %>").datepicker();
);
</script>
<div>
Welche Tage sollen angezeigt werden:
<asp:TextBox runat="server" ID="DisplayFromDateTextBox"></asp:TextBox>
Bis
<asp:TextBox runat="server" ID="DisplayToDateTextBox"></asp:TextBox>
<asp:Button runat="server" ID="DisplayButton" OnClick="DisplayButton_Click" Text="Anzeigen"/>
</div>
<asp:ListBox ID="JournalListBox" runat="server" Height="531px" Width="593px"></asp:ListBox>
在母版页中，我以这种方式包含 jquery：
编辑：当我点击文本字段（第一个）时，效果如下图所示：
更新：当我删除了 cmets 中建议的 ready 函数的冗余部分时，我犯了一些错误。更正它们后，执行就绪时出现 .js 错误：$("#MainContent_DisplayFromDateTextBox").datepicker(); 带来对象或方法不支持日期选择器的错误。最后一个问题是由于自动创建的对 jquery 的脚本引用的干扰，导致 jquery 的手动包含出现故障。
【问题讨论】：
您在代码中使用的是哪个 Jquery 版本？ @vibs2006 3.3.1 对于 IE 11，建议使用 JQuery 1.12。你能用与该代码版本相关的 Jquery 1.12 和 Jquery UI js 再次尝试代码吗？ @vibs2006 使用 1.12.1 jquery 和 jquery-ui 1.12.1 对其进行了测试。效果一样 这2个是一样的，你只需要1个$(document).ready(function () 和$(function ()
【参考方案1】：
你可以这样试试
1.母版页
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication2.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<form runat="server">
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<hr />
</div>
</form>
</body>
</html>2。默认.aspx
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div>
Welche Tage sollen angezeigt werden:
<asp:TextBox runat="server" ID="DisplayFromDateTextBox"></asp:TextBox>
Bis
<asp:TextBox runat="server" ID="DisplayToDateTextBox"></asp:TextBox>
<asp:Button runat="server" ID="DisplayButton" Text="Anzeigen" />
</div>
<script type="text/javascript">
$(document).ready(function ()
$("#<%= DisplayFromDateTextBox.ClientID %>").datepicker();
$("#<%= DisplayToDateTextBox.ClientID %>").datepicker();
);
</script>
</asp:Content>我希望这会帮助你@Thomas。
【讨论】：
很好的尝试，但遗憾的是没有效果：/ 更新了问题，以便将确切发生的情况显示为屏幕截图，并将 .css 行放入其中。 更正了我删除重复/冗余代码时出现的错误，正如几个 cmets 中提出的那样。现在我收到一条错误消息（在问题的更新下撅嘴）。 @Thomas，我在哪个会话中添加了 jquery？ 是的。发现了问题。 ASp.Net 会自动包含对 jquery 的脚本引用...这干扰了 jquery 手册包含。最后，我对 jquery 和 jquery.ui.combined 做了一个脚本引用，然后它就起作用了 :) 这很棒@Thomas :)。如果您认为我的回答对您有帮助，请采纳。【参考方案2】：HTML：在 from 和 to 文本框上添加了属性 CssClass：
<div>
Welche Tage sollen angezeigt werden:
<asp:TextBox runat="server" ID="DisplayFromDateTextBox" CssClass="datepicker"></asp:TextBox>
Bis
<asp:TextBox runat="server" ID="DisplayToDateTextBox" CssClass="datepicker"></asp:TextBox>
<asp:Button runat="server" ID="DisplayButton" OnClick="DisplayButton_Click" Text="Anzeigen" />
</div>
将脚本代码改为：
<script type="text/javascript">
$(document).ready(function ()
var currentDate = new Date();
$("input.datepicker").datepicker(
dateFormat: 'yy-mm-dd',
maxDate: 0,
changeYear: true
);
$("#<%= DisplayFromDateTextBox.ClientID %>").datepicker("setDate", currentDate).datepicker('show');
$("#<%= DisplayToDateTextBox.ClientID %>").datepicker();
);
</script>
谢谢
【讨论】：
the extra ）是一个剪切错误（由于 Se0ng 的评论，我消除了冗余代码部分但忽略了“）”。 Jquery UI css 也需要使日历有吸引力。在这里结帐更多选项：api.jqueryui.com/datepicker/#option-dateFormat jquery ui css 我现在正确包含（在 nuget 包中遇到了一些问题）。另外更正了我删除重复/冗余代码时出现的错误，正如一些 cmets 中提出的那样。现在我收到一条错误消息（在问题的更新下撅嘴）。以上是关于datepicker 在 IE11 中不显示日历的主要内容，如果未能解决你的问题，请参考以下文章
WPF 工具包 DatePicker 更改默认值“显示日历”
Extjs Datefield 在 chrome 中不显示日历