如何在嵌入模式下通过daterangepicker显示双日历

要实现嵌入模式的双日历效果，核心是利用daterangepicker的inline参数，并配置对应选项对齐传统datepicker的展示效果，具体步骤如下：

1. 引入必要依赖 #

确保按顺序引入以下资源（daterangepicker依赖jQuery、Bootstrap和Moment.js）：

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="daterangepicker.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="moment.min.js"></script>
<script src="daterangepicker.js"></script>

2. 添加嵌入容器 #

在页面中创建用于渲染日历的容器：

<div id="embedded-calendar"></div>

3. 初始化daterangepicker #

通过JS初始化并配置双日历、嵌入模式及相关功能：

$(function() {
  $('#embedded-calendar').daterangepicker({
    inline: true, // 开启嵌入模式，直接渲染在容器内
    singleDatePicker: false, // 强制显示双日历（默认值，显式声明避免冲突）
    showDropdowns: true, // 开启年月下拉选择功能
    autoApply: true, // 选择日期后自动应用，无需点击确认按钮
    startDate: moment().subtract(6, 'days'), // 默认起始日期
    endDate: moment(), // 默认结束日期
    // 自定义本地化显示（可选，适配中文场景）
    locale: {
      format: 'YYYY-MM-DD',
      separator: ' 至 ',
      applyLabel: '确定',
      cancelLabel: '取消',
      daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
      monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      firstDay: 1
    }
  }, function(start, end, label) {
    // 日期选择后的回调函数
    console.log(`选中范围：${start.format('YYYY-MM-DD')} 到 ${end.format('YYYY-MM-DD')}`);
  });
});

4. 样式调整（可选） #

为容器设置合适宽度，确保双日历完整显示：

#embedded-calendar {
  width: 750px;
  margin: 20px;
}

常见问题排查 #

• 依赖顺序错误：必须保证jQuery、Bootstrap、Moment.js在daterangepicker之前引入。
• 容器宽度不足：双日历需要足够横向空间，可通过CSS调整容器宽度或响应式布局适配。
• 参数冲突：若之前修改过全局配置，需显式声明singleDatePicker: false确保双日历生效。

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