升级到jquery 3.3.1后,Datepicker无法正常工作

时间:2018-03-21 18:49:27

标签: javascript jquery css twitter-bootstrap-3 datepicker

我正在做一个C#MVC项目。 Datepicker停止工作,我把它缩小到造成它的原因,但没有解决方案......

我在“布局”页面中更改了一行代码,它会破坏日期选择器。特别是从jquery-1.11.1.min.js到jquery-3.3.1.min.js

此布局有效:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>

<script src="~/Scripts/jquery-1.11.1.min.js"></script>

<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.timepicker.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datepicker.min.js"></script>
<script src="~/Scripts/mvcfoolproof.unobtrusive.min.js"></script>
<script src="~/Scripts/MvcFoolproofJQueryValidation.min.js"></script>

<link href="~/Content/jquery.timepicker.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" />
<link href="~/Content/Menu.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
</head>

此布局打破了datepicker:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>

<script src="~/Scripts/jquery-3.3.1.min.js"></script>

<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.timepicker.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datepicker.min.js"></script>
<script src="~/Scripts/mvcfoolproof.unobtrusive.min.js"></script>
<script src="~/Scripts/MvcFoolproofJQueryValidation.min.js"></script>

<link href="~/Content/jquery.timepicker.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" />
<link href="~/Content/Menu.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
</head>

因此,Datepicker不会在输入下方弹出日历,只是输入上方的粗白线。

我无法解决这个问题。帮助

1 个答案:

答案 0 :(得分:0)

我需要Bootstrap.Datepicker v1.7.1 ....

它引入了一些新的.css文件并覆盖了项目中的一些内容,现在datepicker日历正在运行。

我在bootstrap-datepicker.css中需要新代码。我的代码不是最新的。还需要bootstrap-datepicker.js和bootstrap-datepicker.min.js中的新代码

我删除了程序包管理器带来的所有其他内容,一切都按预期工作。