如何使用Bootstrap Datepicker实现双月份范围选择器并按指定格式显示

看起来你已经搭好了核心框架，我来帮你微调代码，让它完全匹配你的需求！以下是优化后的完整实现方案，包含详细的逻辑说明：

完整代码实现 #

<div class="form-group input-border-label">
  <label for="billing_range">Billing Month Range</label>
  <input type="text" id="billing_range" name="billing_range" required>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  $('#billing_range').datepicker({
    format: 'M-yyyy', // 设定月份-年份的显示格式
    autoclose: true, // 选完日期自动关闭选择器
    startView: 1, // 打开时直接展示月份视图
    minViewMode: 1, // 限制仅能选择月份，无法选择具体日期
    multidate: true, // 允许选择多个日期
    multidateSeparator: ' to ', // 多日期之间的分隔符，匹配需求格式
    clearBtn: true, // 提供一键清空按钮
    forceParse: false // 禁止自动解析手动输入的非规范内容，避免格式混乱
  }).on('changeDate', function(e) {
    var currentDates = $(this).datepicker('getDates');
    
    // 仅选择1个日期时：自动复制为两个相同日期，实现"X to X"的显示效果
    if (currentDates.length === 1) {
      $(this).datepicker('setDates', [currentDates[0], currentDates[0]]);
    }
    // 选择超过2个日期时：仅保留最后选择的两个，避免输入框内容杂乱
    else if (currentDates.length > 2) {
      $(this).datepicker('setDates', [
        currentDates[currentDates.length - 2],
        currentDates[currentDates.length - 1]
      ]);
    }
  });
});
</script>

关键逻辑说明 #

我在你的基础代码上补充了forceParse: false，这能防止用户手动输入不符合格式的内容时，插件自动解析成错误日期，确保输入框内容始终保持规范格式。

其他核心配置的作用：

• 视图锁定：startView: 1和minViewMode: 1确保选择器打开时直接展示月份列表，用户完全无法选择具体日期，聚焦在月份选择场景。
• 多日期适配：multidate: true配合multidateSeparator: ' to '，自动生成你需要的分隔格式，无需手动拼接字符串。
• 边界场景处理：
  • 解决单日期选择的显示问题，自动补全为“同月份重复”的格式；
  • 处理误选多个日期的情况，自动保留最后两个选择结果，避免干扰用户。

最终交互效果 #

• 点击输入框弹出月份选择器，选1个月份后，输入框自动显示Jan-2025 to Jan-2025格式；
• 选2个不同月份时，按选择顺序显示Dec-2025 to Feb-2026（支持逆序选择，完全匹配你的示例需求）；
• 点击清空按钮可一键重置输入框；
• 选完日期后选择器自动关闭，提升操作流畅度。

UI效果参考 #

内容来源于stack exchange