如何使用引導程序修復奇怪的樣式3 Datetimepicker

我遇到了Bootstrap 3 Datetimepicker問題，如下圖所示。我已經在文檔中做了所有事情，控制檯是空白的，沒有錯誤。如何使用引導程序修復奇怪的樣式3 Datetimepicker

我已經包括以下資產：

<link href='/assets/plugins/datepicker/css/bootstrap-datetimepicker-standalone.css' /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/nb.js"></script> 
<script src="/assets/plugins/datepicker/js/bootstrap-datetimepicker.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#event_title').datetimepicker({ 
      locale: 'nb' 
     }); 
    }); 
</script>

我的HTML看起來像這樣：

<div class="form-group form-group-relative"> 
    <label>Tittel på arrangement</label> 
    <div style="position: relative;"> 
    <input type="text" class="form-control input-lg" id="event_title" name="event_title" placeholder="Tittel på arrangement"> 
    </div> 
</div>

引導包括在報頭。我甚至檢查過我的自定義CSS是否會干擾Datetimepicker，但我刪除了所有自定義CSS以檢查是否屬於這種情況。沒有我的自定義樣式，我遇到了同樣的問題。我正在使用Bootstrap 3.

會發生什麼情況？

來源

2017-08-12 kanarifugl

嘗試使用包括自舉theme.css –

檢查文檔的Installation Guides部分：

包括必要的腳本和樣式：

<head> 
    <!-- ... --> 
    <script type="text/javascript" src="/bower_components/jquery/jquery.min.js"></script> 
    <script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script> 
    <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script> 
    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" /> 
</head>

由於使用的引導風格（包括在頭引導）您必須使用bootstrap-datetimepicker.css而不是bootstrap-datetimepicker-standalone.css。

這裏工作片斷（使用資源來自CDN）：

$('#event_title').datetimepicker({ 
 
    locale: 'nb' 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/nb.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
 

 
<div class="form-group form-group-relative"> 
 
    <label>Tittel på arrangement</label> 
 
    <div style="position: relative;"> 
 
    <input type="text" class="form-control input-lg" id="event_title" name="event_title" placeholder="Tittel på arrangement"> 
 
    </div> 
 
</div>

來源

2017-08-12 15:36:09 VincenzoC

如何使用引導程序修復奇怪的樣式3 Datetimepicker

回答

相關問題