Bootstrap 6 日期选择器 Datepicker 用法
6.0 内置了日期选择器，基于 Vanilla Calendar Pro。给 input 加 data-bs-toggle 就能用，本文列出常用属性：日期范围、多选、双月视图、内联模式、弹层位置。
一句话结论
5.3 没有内置日期选择器，一般要引 flatpickr 之类的库；6.0 直接内置，底层是 Vanilla Calendar Pro。给一个文本框加 data-bs-toggle="datepicker" 就变成一个日期输入，不需要写初始化代码。
最小示例
<label for="birthday" class="form-label">生日</label>
<input type="text" class="form-control" id="birthday"
data-bs-toggle="datepicker"
autocomplete="off"
placeholder="选择日期">
autocomplete="off" 建议保留，否则浏览器自带的日期补全会盖住弹层。
常用属性
| 属性 | 取值 | 作用 |
|---|---|---|
data-bs-date-min / data-bs-date-max | YYYY-MM-DD | 限制可选范围 |
data-bs-first-weekday | 0–6 | 一周从哪天开始，0 是周日 |
data-bs-placement | left（默认）/ center / right / auto | 弹层相对输入框的位置 |
data-bs-inline | true | 不弹层，直接把日历渲染在页面里 |
data-bs-selection-mode | multiple | 多选日期 |
data-bs-selected-dates | 逗号分隔的日期 | 预设已选日期 |
data-bs-display-months-count | 数字 | 一次显示几个月，配合范围选择用 |
组合示例：选一个区间做报表筛选。
<div class="d-flex gap-2 align-items-end">
<div>
<label for="from" class="form-label">开始</label>
<input type="text" class="form-control" id="from"
data-bs-toggle="datepicker" autocomplete="off"
data-bs-date-min="2026-01-01">
</div>
<div>
<label for="to" class="form-label">结束</label>
<input type="text" class="form-control" id="to"
data-bs-toggle="datepicker" autocomplete="off"
data-bs-date-max="2026-12-31">
</div>
</div>
和输入框装饰一起用
日历图标用表单装饰（form adorn）放在输入框里，图标放末尾时给包裹层加 .form-adorn-end，标记顺序不变，只改变视觉顺序：
<div class="form-control form-adorn form-adorn-end">
<div class="form-adorn-icon">
<svg class="bi" width="16" height="16"><use href="#calendar-week"></use></svg>
</div>
<input type="text" class="form-ghost" id="dateWithIcon"
data-bs-toggle="datepicker" autocomplete="off" placeholder="选择日期">
</div>
常见坑
- 字段值始终是字符串（
YYYY-MM-DD或你配置的格式），交给后端前自己校验，别指望组件帮你转成日期对象。 - 用
bootstrap.js（非 bundle）时，Vanilla Calendar Pro 不会自动带上，需要自己通过 import map 提供；用bootstrap.bundle.js则已包含。 - 移动端小屏建议用
data-bs-inline="true"直接内嵌日历，弹层在窄屏上容易被键盘挤压。 - 日期范围限制是「硬限制」，超出
min/max的日期直接不可点，不是提交时报错。