本文介绍如何使用 Bootstrap Datepicker 的 changeDate 事件和 getDates() 方法实时获取多选日期数量，并在表单提交时将其安全传递至后端，用于生成含日期计数的 PDF 报告。
本文介绍如何使用 bootstrap datepicker 的 `changedate` 事件和 `getdates()` 方法实时获取多选日期数量，并在表单提交时将其安全传递至后端，用于生成含日期计数的 pdf 报告。
在基于 Bootstrap Datepicker 实现多日期选择（multidate: true）的场景中，常需将用户选中的日期总数（如排班天数、考勤天数等）动态注入 PDF 报告。核心在于准确捕获选中状态变化与可靠读取当前日期数组长度。
✅ 推荐实现方式：双时机监听 + 显式传参
Bootstrap Datepicker 提供两种主流方式获取选中日期数量：
-
实时响应：监听
changeDate事件，通过事件对象e.dates获取最新选中日期数组（注意：e.dates是Date[]数组，长度即为选中数量）； -
提交前确认：在表单
submit事件中调用datepicker('getDates')方法，确保获取最终稳定状态，避免因异步或 UI 延迟导致数据滞后。
以下是完整、健壮的集成代码示例：
<!-- 引入依赖（CDN） --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
jQuery($ => {
const $dateInput = $('input[name="rosterdate"]');
const $container = $('.bootstrap-iso form').length > 0
? $('.bootstrap-iso form').parent()
: 'body';
// 初始化多日期选择器
$dateInput.datepicker({
multidate: true,
format: 'yyyy-mm-dd',
container: $container,
todayHighlight: true,
autoclose: false
}).on('changeDate', e => {
// ✅ 实时反馈：控制台输出当前选中数量（可用于 UI 更新，如显示“已选 X 天”）
console.log('当前选中日期数：', e.dates.length);
});
// ✅ 表单提交时获取最终数量并传入后端
$('form').on('submit', function(e) {
e.preventDefault();
const selectedDates = $dateInput.datepicker('getDates');
const dateCount = selectedDates.length;
// ? 关键步骤：将数量作为隐藏字段注入表单，或通过 AJAX 发送
// 方式一：添加隐藏输入框（推荐，兼容传统 PDF 生成服务）
$('<input>').attr({
type: 'hidden',
name: 'selected_date_count',
value: dateCount
}).appendTo(this);
// 方式二：AJAX 提交（更灵活，适合现代 PDF API）
// $.post('/generate-report', {
// roster_dates: selectedDates.map(d => d.toISOString().split('T')[0]),
// date_count: dateCount
// }).done(res => window.open(res.pdfUrl, '_blank'));
// 最终提交表单（后端可直接接收 selected_date_count 字段）
this.submit();
});
});<!-- HTML 结构 -->
<div class="bootstrap-iso">
<form action="/generate-pdf-report" method="POST">
<input type="text" name="rosterdate" placeholder="点击选择多个日期..." />
<button type="submit">生成 PDF 报告</button>
</form>
</div>⚠️ 注意事项与最佳实践
-
时区一致性：
getDates()返回的是本地Date对象，若后端需 UTC 时间，请统一转换（如date.toISOString().split('T')[0]）； -
空值处理：
e.dates在清空所有日期时为[]，length为0，无需额外判空； -
PDF 集成建议：后端接收到
selected_date_count后，可将其写入 PDF 模板（如使用pdfmake、iText或wkhtmltopdf），例如在报告标题处显示 “本次排班共覆盖 {{selected_date_count}} 天”； -
用户体验增强：可在页面添加
<span id="date-count-display">0 天已选</span>，并在changeDate中实时更新：$('#date-count-display').text(${e.dates.length} 天已选);
通过上述方案，你不仅能精准统计多选日期数量，还能确保该数值以可靠、可扩展的方式流入 PDF 生成流程，兼顾前端交互性与后端实用性。
