如何通过Shift/Ctrl键切换Bootstrap Datepicker范围选/多选日期功能

这个需求可以直接实现，以下是修改后的可运行代码及逻辑说明：

现有代码问题梳理 #

• 未声明isShift、isCtrl全局变量，运行易抛出未定义错误
• 仅监听输入框的按键事件，日期选择器弹出后焦点离开输入框时，按键逻辑会失效
• 未在按键触发后动态更新Datepicker的配置，无法切换选择模式

完整修改后代码 #

<div class="col-xs-12">
  <input class="form-control" type="text" id="multi" name="multi" required>
  <div class="help-block with-errors"></div>
</div>

<script>
// 声明全局状态变量
let selectMode = 'multi' // 默认模式，可自行修改为range

// 初始化日期选择器
const $datepicker = $('#multi').datepicker({
  multidate: true,
  format: 'mm-dd-yyyy',
  forceParse: false
}).on('hide', function (e) {
  e.stopPropagation();
})

// 监听全局按键按下事件，切换模式
$(document).on('keydown', function(event) {
  if (event.shiftKey) {
    selectMode = 'range'
    // 动态更新配置为范围选择模式
    $datepicker.datepicker('setOptions', {
      multidate: 'range'
    })
  } else if (event.ctrlKey) {
    selectMode = 'multi'
    // 动态更新配置为多日期选择模式
    $datepicker.datepicker('setOptions', {
      multidate: true
    })
  }
})

// 可选：如果需要松开按键后回到默认模式，取消注释以下代码
// $(document).on('keyup', function() {
//   selectMode = 'multi'
//   $datepicker.datepicker('setOptions', {
//     multidate: true
//   })
// })
</script>

关键逻辑说明 #

• 监听全局document的按键事件，保证不管焦点在输入框还是弹出的日期选择器上，都能正确识别按键状态
• 调用Datepicker内置的setOptions方法动态修改配置，无需重新初始化组件
• 官方原生支持multidate: 'range'配置，开启后自动限制为只能选单个连续日期范围，完全符合Shift键的需求

新手注意事项 #

• 请确保资源引入顺序正确：先引入jQuery，再引入Bootstrap核心文件，最后引入Bootstrap Datepicker的CSS和JS文件
• 如果使用的是定制版Datepicker组件不支持multidate: 'range'参数，可以把range模式下的multidate设为2，额外写逻辑计算两个选中日期之间的所有日期填充即可

内容的提问来源于stack exchange，提问作者xtian