如何实现响应式Responsive Daterangepicker：桌面显2月，移动端显1月

需求说明 #

桌面设备显示2个月日历视图，平板及移动设备仅显示1个月日历视图，同时保留日期范围选择功能。

实现步骤 #

1. 核心思路 #

通过CSS媒体查询控制小屏幕下第二个日历面板的显示状态，结合JS窗口resize监听实现组件动态适配，确保窗口尺寸变化时自动调整视图。

2. CSS样式适配 #

添加媒体查询规则，当屏幕宽度小于768px（可按需调整断点）时，隐藏右侧日历并居中左侧日历：

@media (max-width: 767px) {
  /* 隐藏右侧日历面板 */
  .daterangepicker .calendar.right {
    display: none;
  }
  /* 居中左侧日历 */
  .daterangepicker .calendar.left {
    margin: 0 auto;
  }
  /* 调整选择器容器宽度适配小屏幕 */
  .daterangepicker {
    width: auto;
    min-width: 280px;
  }
}

3. JS逻辑优化 #

编写初始化函数，结合窗口resize事件（添加防抖避免频繁触发），动态重建组件适配屏幕尺寸：

// 定义移动设备断点（可按需修改）
const MOBILE_BREAKPOINT = 768;

// 初始化日期选择器函数
function initDateRangePicker() {
  // 先销毁已存在的实例，避免重复绑定
  $('input[name="daterange"]').daterangepicker('destroy');
  
  $('input[name="daterange"]').daterangepicker({
    opens: 'left',
    // 保留范围选择功能，仅调整视图显示
    singleDatePicker: false,
    showDropdowns: true
  }, function(start, end, label) {
    console.log("已选择日期范围: " + start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD'));
  });
}

// 页面加载完成后初始化
$(function() {
  initDateRangePicker();
  
  // 监听窗口尺寸变化，防抖后重新初始化
  $(window).on('resize', function() {
    clearTimeout(window.resizeTimer);
    window.resizeTimer = setTimeout(initDateRangePicker, 250);
  });
});

4. 完整代码示例 #

HTML部分

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<!-- 自定义响应式样式 -->
<style>
@media (max-width: 767px) {
  .daterangepicker .calendar.right {
    display: none;
  }
  .daterangepicker .calendar.left {
    margin: 0 auto;
  }
  .daterangepicker {
    width: auto;
    min-width: 280px;
  }
}
</style>

<input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />

JS部分

const MOBILE_BREAKPOINT = 768;

function initDateRangePicker() {
  $('input[name="daterange"]').daterangepicker('destroy');
  
  $('input[name="daterange"]').daterangepicker({
    opens: 'left',
    singleDatePicker: false,
    showDropdowns: true
  }, function(start, end, label) {
    console.log("已选择日期范围: " + start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD'));
  });
}

$(function() {
  initDateRangePicker();
  
  $(window).on('resize', function() {
    clearTimeout(window.resizeTimer);
    window.resizeTimer = setTimeout(initDateRangePicker, 250);
  });
});

说明 #

• 断点值768px可根据实际需求调整，适配不同设备尺寸；
• 防抖函数设置的250ms可优化窗口resize时的性能，避免组件频繁重建；
• 该方案保留原有日期范围选择功能，仅调整视图显示逻辑，不影响用户操作体验。

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