[英]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.