Tempus Dominus 日期时间选择器 v6.10.4
Bootstrap 官方没有提供日期选择组件，Tempus Dominus 是社区主流替代：日历 + 时钟、日期范围、最小/最大日期限制、中文本地化一应俱全。v6 为原生 JavaScript 编写，不依赖 jQuery，可直接配合 Bootstrap 5.3 使用。
官方对照
先看 Bootstrap 官方能做什么、本库补齐了什么。
官方没有| 对比维度 | Bootstrap 官方 | Tempus Dominus |
|---|---|---|
| 能力定位 | 仅提供原生 <input type="date"> 输入框，样式随浏览器渲染，各端外观不统一 |
功能完整的弹出式日期/时间/范围选择器，外观跨浏览器一致 |
| 核心特性 | 无额外 API，无范围选择、无时间选择、无禁用日期 | 日历 + 时钟、日期范围（dateRange）、minDate/maxDate 限制、本地化、键盘导航、今天/清除快捷按钮 |
| 依赖与体积 | 零依赖 | 仅依赖 @popperjs/core 做弹出定位，单文件约 50KB（gzip 后更小） |
| 适用场景 | 对外观无要求的简单原生日期录入 | 后台表单、预约系统、报表筛选等需要精确日期时间与中文界面的场景 |
| 与 Bootstrap 5.3 | 原生支持 | v6 原生支持 Bootstrap 5.x，不依赖 jQuery；下方示例真实运行 |
对照表说明
结论：Bootstrap 官方「没有」日期选择器组件，需要选择器时选用 Tempus Dominus 等第三方库；
若只接受原生体验，可使用 <input type="date">，但需自行接受各浏览器样式不一致的代价。引入方式
通过 jsDelivr 固定版本引入：样式放 <head>，脚本放 <body> 末尾。注意依赖顺序：先 Popper，再 Tempus Dominus 本体，最后是中文语言包；语言包注册的 zh-CN locale 需要在初始化时通过 localization.locale 启用。本站 Bootstrap bundle 已内置 Popper，但本页仍单独显式引入 @popperjs/core 以保证自包含。
引入代码
<!-- Bootstrap CSS（本站统一 5.3.8） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Tempus Dominus 样式 -->
<link href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.10.4/dist/css/tempus-dominus.min.css" rel="stylesheet">
<!-- 依赖：Popper（弹出层定位） -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<!-- Tempus Dominus 本体 + 中文语言包 -->
<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.10.4/dist/js/tempus-dominus.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.10.4/dist/locales/zh-CN.js"></script>基础示例
用 new tempusDominus.TempusDominus(element, options) 初始化包裹在 .input-group 里的容器；点击输入框即弹出日历，右侧按钮可手动切换弹出层。日历底部提供「今天 / 清除 / 关闭」快捷按钮。
HTML + 初始化 JS
<div class="input-group" id="td-basic">
<input type="text" class="form-control" placeholder="点击选择日期时间">
<button class="btn btn-outline-secondary" type="button" id="td-basic-toggle">切换日历</button>
</div>
<script>
var td = new tempusDominus.TempusDominus(document.getElementById('td-basic'), {
localization: { locale: 'zh-CN' },
display: {
buttons: { today: true, clear: true, close: true }
}
});
document.getElementById('td-basic-toggle').addEventListener('click', function () {
td.toggle(); // 手动弹出 / 收起日历
});
</script>日期时间与范围选项
把 dateRange 设为 true 即变为起止日期范围选择器；restrictions.minDate 限制只能选今天之后；display.components.clock 设为 false 可隐藏时钟只保留日期。
HTML + 初始化 JS
<div class="input-group" id="td-range">
<input type="text" class="form-control" placeholder="选择开始日期 — 结束日期">
</div>
<script>
new tempusDominus.TempusDominus(document.getElementById('td-range'), {
localization: { locale: 'zh-CN' },
dateRange: true, // 启用日期范围
restrictions: { minDate: new Date() }, // 今天之前不可选
display: {
components: { clock: false } // 只选日期，不选时间
}
});
</script>