IE的MVC中的DatePicker给我$ is undefined
IE的MVC中的DatePicker给我$ is undefined
提问于 2015-07-27 21:37:39
我正在尝试为我的MVC5应用程序设置jQuery日期选择器。当我在Internet Explorer11中打开应用程序时，我得到消息''$‘is undefined’。您可以看到呈现的HTML，并在帖子末尾指出了有问题的行。
我的模型是这样设置的：
namespace PublicationSystem.ViewModels
{
public class ProfileEdit : IValidatableObject
{
public Guid ProfileId { get; set; }
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime? BirthDate { get; set; }
//...
}
}我的编辑视图如下所示：
@model PublicationSystem.ViewModels.ProfileEdit
@{
ViewBag.Title = "Edit Profile";
Layout = "~/Views/Shared/_LayoutSmBanner.cshtml";
}
@using (Html.BeginForm())
{
...
<div class="form-group">
@Html.LabelFor(model => model.BirthDate, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.BirthDate, new { @class = "datepicker" })
@Html.ValidationMessageFor(model => model.BirthDate)
</div>
</div>
...
}我的布局(它们是嵌套的)：
_LayoutSmBanner.cshtml：
@inherits System.Web.Mvc.WebViewPage
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container">
<div class="row">
<div class="main-column">
@RenderBody()
</div>
</div>
</div>
@RenderSection("scripts", required: false)_Layout.cshmtl：
<!DOCTYPE html>
<html lang="en">
<head>
...
@Styles.Render("~/bundles/css")
@Scripts.RenderFormat("<script src='{0}' defer></script>", "~/bundles/scripts")
</head>
<body>
<div>
@RenderBody()
</div>
<footer class="footer">...</footer>
@RenderSection("scripts", required: false)
<script type="text/javascript">
$(function () {
$(".datepicker").datepicker();
});
</script>
</body>
渲染后的HTML头部如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta ...>
<title>...</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="/Content/css/bootstrap.3.3.5.css" rel="stylesheet"/>
<link href="/Content/css/sticky-footer.css" rel="stylesheet"/>
<link href="/Content/themes/base/core.css" rel="stylesheet"/>
<link href="/Content/themes/base/resizable.css" rel="stylesheet"/>
<link href="/Content/themes/base/selectable.css" rel="stylesheet"/>
<link href="/Content/themes/base/accordion.css" rel="stylesheet"/>
<link href="/Content/themes/base/autocomplete.css" rel="stylesheet"/>
<link href="/Content/themes/base/button.css" rel="stylesheet"/>
<link href="/Content/themes/base/dialog.css" rel="stylesheet"/>
<link href="/Content/themes/base/slider.css" rel="stylesheet"/>
<link href="/Content/themes/base/tabs.css" rel="stylesheet"/>
<link href="/Content/themes/base/datepicker.css" rel="stylesheet"/>
<link href="/Content/themes/base/progressbar.css" rel="stylesheet"/>
<link href="/Content/themes/base/theme.css" rel="stylesheet"/>
<link href="/Content/css/style.css" rel="stylesheet"/>
<script src='/Content/JS/jquery.1.11.2.js' defer></script>
<script src='/Content/JS/bootstrap.3.3.4.js' defer></script>
<script src='/Content/JS/jquery-ui-1.11.4.js' defer></script>
<script src='/Content/JS/ie10-viewport-bug-workaround.js' defer> </script>
<script src='/Content/JS/Script.js' defer></script>
</head>身体是这样呈现的：
<body>
...
<footer>...</footer>
<script type="text/javascript">
$(function () { // <--- IE errors here -----
$(".datepicker").datepicker();
});
</script>
</body>回答 1
Stack Overflow用户
发布于 2015-07-27 22:36:57
根据评论和其他项目的建议，我提出了这个解决方案。
我将我的datepicker脚本添加到\Content\JS\Script.js中，该脚本包加载时会包含该脚本。
$(document).ready(function () {
$(".datepicker").datepicker({
dateFormat: "mm/dd/yyyy",
autoclose: true
});
});这使脚本能够在加载JQuery后正确运行。
我的Edit.cshtml结果是这样的：
<div class="form-group">
@Html.LabelFor(model => model.BirthDate, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.BirthDate)
@Html.ValidationMessageFor(model => model.BirthDate)
</div>
</div>但是，为了让它正常工作，我需要编写一个自定义日期编辑器\Views\Shared\EditorTemplates\Date.cshtml
@model DateTime?
@{
var value = "";
if (Model.HasValue) {
value = String.Format("{0:d}", Model.Value.ToString("MM/dd/yyyy"));
}
}
@Html.TextBox("", value, new { @class = "datepicker", type = "text" })页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31654628
复制相关文章
相似问题
腾讯云开发者
