引导日期时间选择器样式未正确应用

Posted

技术标签:

【中文标题】引导日期时间选择器样式未正确应用【英文标题】：bootstrap datetimepicker styles not applied correctly 【发布时间】：2015-06-04 22:41:06 【问题描述】：

我在使这个引导程序 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>

现在，并不是插件不起作用，而是某些样式没有正确应用。这是一张图片，可以更好地说明我的意思。左边是我拥有的，右边是我真正想要的：

如您所见，所有内容都向左对齐而不是居中对齐，并且内容更窄。此外，当我将鼠标悬停在日历上并且当前日期未正确勾勒时，没有悬停效果。谁能告诉我我做错了什么？

【问题讨论】：

【参考方案1】：

从您的屏幕截图来看，您似乎没有拉入 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>

P.S. - 很难调试，因为我们无法知道您本地 /js/ 文件夹中的文件是什么样的。将来，我建议将 CDN 用于在线示例，以便更轻松地与他人分享您正在查看的内容。您可以在此处使用 cdnjs 获取可分发的静态文件：

bootstrap-datetimepicker moment.js

【讨论】：

【参考方案2】：

谢谢凯尔，你是对的，我没有拉 CSS 样式。虽然这不是因为我没有包含它……而是我的包含语句中的一个错误。这就是我所拥有的：

<link rel="stylesheet" src="css/bootstrap-datetimepicker.min.css">

我不小心放了“src”而不是“href”，所以这是我应该放的：

<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">

感谢您为我指明正确的方向:)

【讨论】：

同样的事情发生在我身上:)【参考方案3】：

免责声明： 我看到很多很好的答案。这个答案特定于 RAILS 6 和 Webpacker 4+，我在 rails 6 和 webpacker 中特别遇到了这个问题。为这个案例发布这个，因为我没有找到它。

如果您已将bootstrap-datepicker 安装为yarn 包 你的 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，但没有建议我们需要显式导入它。

希望这会有所帮助！编码愉快！

【讨论】：

谢谢，这正是我想要的。我有@import "bootstrap-datepicker/dist/css/bootstrap-datepicker.css"; （没有）最小和在开发中有效但在生产中无效。 放弃那个。还是一样的问题。在开发中效果很好，但在生产中效果不佳。【参考方案4】：

我有同样的症状，因为同样的样式问题没有加载。就我而言，我的应用程序是 Rails 5 应用程序，在我的 application.css 文件中，我有

*= require_bootstrap-datetimepicker

而不是

*= require bootstrap-datetimepicker

进行该更正为我修复了它。

【讨论】：

以上是关于引导日期时间选择器样式未正确应用的主要内容，如果未能解决你的问题，请参考以下文章

引导日期选择器弹出窗口未显示突出显示的当前日期

如果您使用引导日期选择器，日期会消失

未捕获的类型错误：未定义不是日期选择器引导程序的函数

引导输入类型=“日期”不加载日期选择器

如何使用引导日期选择器

引导模式 + 日期选择器 + 表单值