代码之家 › 专栏 › 技术社区 › kanarifugl

如何使用Bootstrap 3 Datetimepicker修复奇怪的样式

eonasdan-datetimepicker datetimepicker twitter-bootstrap css

kanarifugl · 技术社区 · 7 年前

我包括以下资产:

<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>

可能是什么情况?

1 回复 | 直到 7 年前

VincenzoC 7 年前

检查 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 .

$('#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>