Bootstrap问题：jQuery DateTimePicker无法显示日期时间选项

作为踩过无数Bootstrap组件坑的开发者，我先给你列几个最容易翻车的排查点——毕竟你只贴了部分head代码，大概率是基础环节出问题了：

1. 依赖加载顺序绝对不能乱！ #

Bootstrap Datetimepicker是个“依赖怪”，必须严格按顺序加载：

• jQuery要第一个上（Bootstrap和Datetimepicker都靠它吃饭）
• 然后是Bootstrap的JS文件
• 最后才是Datetimepicker的JS文件

举个正确的加载示例（建议把JS放在body末尾，比放head里更稳）：

<!-- 先引入jQuery，版本别太老，3.x系列就行 -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- 然后Bootstrap核心JS -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- 最后上Datetimepicker的JS -->
<script src="vendor/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
<!-- 如果要中文显示，还要加语言包 -->
<script src="vendor/bootstrap/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

你之前只贴了CSS，很大概率是JS顺序错了，直接导致组件完全没激活。

2. 别忘了写初始化代码！ #

光引入文件没用，得告诉浏览器“这玩意儿是个日期选择器”啊！

假设你的输入框结构是这样的（推荐用官方要求的容器结构）：

<div class="input-group date" id="datetimepicker">
  <input type="text" class="form-control" readonly>
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

那必须加一段初始化JS，而且要等DOM加载完再执行：

$(document).ready(function() {
  $('#datetimepicker').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss', // 自定义显示格式，可选
    locale: 'zh-CN' // 对应语言包，可选
  });
});

如果没这段代码，输入框就是个普通文本框，点破头也不会弹出日历。

3. 先检查控制台有没有404错误！ #

右键页面→检查→控制台，看看有没有红色的404提示——这说明你写的CSS/JS路径根本找不到文件！比如你写的vendor/bootstrap/css/bootstrap-datetimepicker.min.css，得确保文件真的在这个文件夹里，别打错文件名或者层级。

4. 有没有其他JS库冲突？ #

如果页面里还加了Prototype、Zepto这类库，会和jQuery的$符号冲突。试试把初始化代码里的$换成jQuery：

jQuery(document).ready(function() {
  jQuery('#datetimepicker').datetimepicker();
});

5. HTML结构有没有符合要求？ #

有些旧版本的Datetimepicker要求输入框必须放在带input-group date类的容器里，单独的输入框可能触发不了弹窗。按我上面给的容器结构写准没错。

先从这几点排查，尤其是前两点——90%的新手问题都出在依赖顺序和忘记初始化上。如果还是不行，把完整的HTML代码贴出来，我再帮你揪细节。

内容的提问来源于stack exchange，提问作者denbuttigieg