Bootstrap 官方不提供日期选择器，因其专注基础 UI 而将富交互控件交由社区；推荐 flatpickr 或 tempusdominus，需用 type="text" 并修复定位与样式以匹配 Bootstrap。
Bootstrap 本身不提供原生日期选择器组件，直接用 bootstrap 的 CSS 类或 JS 插件写不出带日历弹层、年月切换、选中高亮的日期控件——这是常见误解的根源。
为什么 Bootstrap 5/4 官方没 datepicker
Bootstrap 的设计哲学是专注布局、响应式和基础 UI（按钮、表单控件、导航等），而日期选择属于「富交互表单控件」，需要复杂的状态管理、国际化、键盘可访问性支持。官方把这部分交给了社区生态。
- Bootstrap 3 曾有第三方插件
bootstrap-datepicker，但它从未被官方维护 - Bootstrap 4/5 彻底移除了对任何日期选择器的 JS 依赖，
<input type="date">是唯一“内置”方案（但样式和行为由浏览器决定，不可控） - 强行用
.form-control+type="date"只能获得系统级原生控件，iOS Safari 和旧版 Android 浏览器体验割裂，且无法自定义主题
实际项目中该用哪个库？
推荐两个轻量、兼容性好、与 Bootstrap 样式融合度高的方案：
-
flatpickr：体积小（~28KB gzip）、无依赖、自带中文 locale、默认风格简洁，通过className或 CSS 覆盖轻松匹配 Bootstrap 表单尺寸和圆角 -
tempusdominus-bootstrap-4（或tempusdominus-bootstrap-5）：专为 Bootstrap 设计，自动继承.form-control样式、支持 input-group、图标按钮集成方便，但体积稍大（含 moment 或 date-fns） - 避坑提醒：
bootstrap-datepicker（eternicode 版）已多年未更新，不支持 Bootstrap 5，且存在 XSS 风险（autoclose+format组合可能执行任意 JS）
用 flatpickr 快速接入（以 Bootstrap 5 为例）
只需三步，不破坏现有表单结构：
- 引入 CDN：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
- HTML 保持标准 Bootstrap 表单写法：
<div class="mb-3"> <label class="form-label">预约日期</label> <input type="text" class="form-control" id="datePicker"> </div>
- 初始化时绑定并适配样式：
flatpickr("#datePicker", { dateFormat: "Y-m-d", locale: "zh", // 关键：让弹层宽度匹配 input 宽度，避免错位 positionElement: document.getElementById("datePicker"), // 可选：点击 input 时自动聚焦，触发弹层 clickOpens: true });
注意：type="text" 是必须的——用 type="date" 会触发原生控件，反而干扰 flatpickr。
样式冲突和定位偏移怎么调？
最常见的问题是日历弹层位置飘在页面左上角，或宽度远小于 input。根本原因是 flatpickr 默认按 position: absolute 相对于视口定位，而非 input。
- 修复定位：确保 input 父容器没有
transform、perspective或filter（这些会创建新的 containing block，导致position: absolute失效） - 修复宽度：显式设置
wrap: true并在 CSS 中加一句：.flatpickr-calendar { width: 100% !important; } - 字体/圆角同步：覆盖
.flatpickr-input的border-radius和font-size，值直接抄 Bootstrap 的$input-border-radius和$input-font-size
真正麻烦的从来不是“怎么装”，而是“怎么让它看起来就像 Bootstrap 原生的一样”——这需要检查 DOM 结构层级、CSS 优先级、以及是否意外触发了浏览器的原生日期提示（比如 input 上残留 type="date" 属性）。
