[英]bootstrap datetimepicker styles not applied correctly
我在使这个 bootstrap datetimepicker 工作时遇到了一些麻烦：
http://eonasdan.github.io/bootstrap-datetimepicker/
我做了一个非常基本的页面，这是代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>Test page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" src="css/bootstrap-datetimepicker.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/moment-with-locales.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#datetimepicker1').datetimepicker();
});
</script>
</head>
<body>
<div class='col-sm-2'>
<div class='input-group' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</body>
</html>
现在，这不是插件不起作用，更像是某些样式没有正确应用。 这是一张图片，可以更好地说明我的意思。 左边是我拥有的，右边是我真正想要的：
如您所见，所有内容都向左对齐而不是居中对齐，并且内容更窄。 此外，当我将鼠标悬停在日历上时没有悬停效果，并且当前日期未正确勾画。 谁能告诉我我做错了什么？
从您的屏幕截图来看，您似乎没有引入bootstrap-datetimepicker.css库。 查看您的控制台并确保您没有任何错误，并且该库存在于它要查找的文件夹中并且包含所有适当的内容。
如果没有额外的 css，它看起来不会很糟糕，因为 bootstrap 正在完成大部分繁重的工作，而插件通常只是利用 Bootstrap 的类并添加一些自己的类来将它们全部装箱。
$(function() { $('#datetimepicker1').datetimepicker(); });
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/> <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script> <div class='col-xs-4'> <div class='input-group' id='datetimepicker1'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div>
$(function() { $('#datetimepicker1').datetimepicker(); });
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script> <div class='col-xs-4'> <div class='input-group' id='datetimepicker1'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div>
PS - 很难调试，因为我们无法知道本地
/js/文件夹中的文件是什么样的。 将来，我建议将 CDN 用于在线示例，以便更轻松地与他人分享您正在查看的内容。 您可以在此处使用 cdnjs 获取可分发的静态文件：
谢谢凯尔，你是对的，我没有拉 CSS 样式。 虽然这不是因为我没有包含它......而是我的包含声明中的一个错误。 这就是我所拥有的：
<link rel="stylesheet" src="css/bootstrap-datetimepicker.min.css">
我不小心放了“src”而不是“href”，所以这是我应该放的：
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
感谢您为我指明正确的方向:)
我有同样的症状，因为同样的样式没有加载。 就我而言，我的应用程序是一个 Rails 5 应用程序，在我的application.css文件中，我有
*= require_bootstrap-datetimepicker
代替
*= require bootstrap-datetimepicker
进行该更正为我修复了它。
免责声明：我看到很多好的答案。 这个答案特定于 RAILS 6 和 Webpacker 4+，我在 rails 6 和 webpacker 中特别遇到了这个问题。 为这个案例发布这个，因为我没有找到它。
如果您已将bootstrap-datepicker作为yarn包安装， node_modules/bootstrap-datepicker安装在node_modules/bootstrap-datepicker
JS 初始化可以在 application.js -> $('.datepicker').datepicker()
但是样式只会在您在 application.css 中添加以下行后才会生效（至少这是我面临的问题）
@import "bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css";
参考资料： Bootstrap-datepicker
上面的文档提到了 CSS，但没有建议我们需要明确导入它。
希望这可以帮助！ 快乐编码！
Bootstrap datetimepicker TypeError：$（...）。datetimepicker不是一个函数
[英]Bootstrap datetimepicker TypeError: $(…).datetimepicker is not a function
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.