如何在Bootstrap 4中使用bootstrap-datepicker？其在Bootstrap 3可正常运行

嘿，我知道你之前在Bootstrap 3里用bootstrap-datepicker挺顺手的，切换到Bootstrap 4之后可能碰到了样式或者功能上的小问题？别慌，我给你整理了一套适配Bootstrap 4的完整方案，照着来就能搞定！

1. 正确引入资源顺序 #

Bootstrap 4的依赖和Bootstrap 3有差异，一定要保证资源引入顺序正确，不然容易出现样式错乱或者功能失效：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- 先引入Bootstrap 4核心CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
  <!-- 再引入datepicker的CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
</head>
<body>
  <!-- 你的页面内容 -->

  <!-- JS部分顺序：jQuery → Popper.js → Bootstrap 4 JS → datepicker JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
</body>
</html>

2. 初始化datepicker（和Bootstrap 3逻辑一致） #

初始化代码和你之前在Bootstrap 3里写的差不多，只是要注意Bootstrap 4的表单布局类（比如form-group还是可用的），给你个简单示例：

<!-- 表单输入框示例 -->
<div class="form-group mt-4 ml-4">
  <label for="datepicker">选择日期</label>
  <input type="text" class="form-control w-25" id="datepicker">
</div>

<script>
  $(document).ready(function(){
    $('#datepicker').datepicker({
      format: 'yyyy-mm-dd', // 自定义日期格式
      autoclose: true, // 选完日期自动关闭面板
      todayHighlight: true, // 高亮显示今天日期
      clearBtn: true // 显示清除按钮（可选）
    });
  });
</script>

3. 修复可能的样式冲突 #

有时候datepicker的默认样式和Bootstrap 4的组件风格不太匹配，你可以加一点自定义CSS来调整：

/* 适配Bootstrap 4的下拉面板样式 */
.datepicker-dropdown {
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

/* 选中日期的高亮样式对齐Bootstrap 4的主色调 */
.datepicker table tr td.active,
.datepicker table tr td.active:hover {
  background-color: #007bff;
  border-color: #007bff;
}

4. 可选：添加中文本地化支持 #

如果需要中文界面，只要引入对应的语言包，然后初始化时指定语言即可：

<!-- 在datepicker JS之后引入中文语言包 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>

$('#datepicker').datepicker({
  language: 'zh-CN',
  // 其他配置项
});

这样配置完，bootstrap-datepicker就能在Bootstrap 4环境下和你之前在Bootstrap 3里一样顺畅使用啦！

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