如何为datetimepicker添加多选功能？datepicker已实现但datetimepicker失效

DevOps 小满

2026-5-11

解决bootstrap-datetimepicker无法启用multidate多选的问题

你遇到的这个问题核心在于：你当前使用的tarruda版bootstrap-datetimepicker，其datetimepicker组件本身并不支持multidate配置项——虽然它依赖的基础datepicker组件支持多选功能，但扩展出来的datetimepicker并没有移植这个特性，所以你设置multidate: true自然不会生效。

可行的解决方案

方案1：更换支持多选的datetimepicker库

推荐使用Tempus Dominus Bootstrap DateTimePicker（原bootstrap-datetimepicker的官方继任维护版本），它原生支持datetime的多选功能，配置起来更省心。示例代码如下：

$('#datetimepicker').datetimepicker({
  format: 'YYYY-MM-DD HH:mm:ss',
  allowMultidate: true, // 启用多选
  multidateSeparator: ', ', // 设置选中时间的分隔符
  locale: 'pt-br'
});

这个库的文档更完善，后续维护也更活跃，能避免旧版本的功能缺失问题。

方案2：手动实现多选逻辑（适合不想换库的场景）

如果必须沿用当前的旧库，可以自己手动处理多选逻辑，步骤如下：

维护一个数组存储选中的datetime值
监听datetimepicker的changeDate事件，将选中的时间添加到数组（注意去重）
把数组中的值拼接后显示到输入框中

示例代码：

let selectedDates = [];

$('#datetimepicker').datetimepicker({
  format: 'yyyy-mm-dd hh:mm:ss',
  language: 'pt-BR'
}).on('changeDate', function(e) {
  const selectedDate = e.date.format('yyyy-mm-dd hh:mm:ss');
  // 避免重复添加相同时间
  if (!selectedDates.includes(selectedDate)) {
    selectedDates.push(selectedDate);
  }
  // 更新输入框的显示内容
  $(this).find('input').val(selectedDates.join(', '));
});

这种方式需要额外处理删除选中项的逻辑（比如添加按钮让用户移除指定时间），相对繁琐，但能在现有库的基础上实现需求。