如何在非Bootstrap的jQuery环境下默认加载Modal时显示daterangepicker

要实现页面加载后打开自定义Modal时自动显示daterangepicker，核心就是在Modal完全渲染显示后，手动触发daterangepicker的显示方法，具体步骤如下：

1. 确保依赖正确引入 #

先确认页面已经引入了jQuery、daterangepicker的JS文件和对应的CSS样式文件。

2. 基础HTML结构示例 #

假设你的自定义Modal和日期输入框结构如下：

<!-- 自定义Modal容器 -->
<div class="custom-modal" id="datePickerModal" style="display: none;">
  <div class="modal-inner">
    <!-- daterangepicker绑定的输入框 -->
    <input type="text" id="dateRange" placeholder="选择日期范围">
    <button class="modal-close">关闭</button>
  </div>
</div>

3. 初始化daterangepicker #

先正常完成daterangepicker的初始化配置，确保实例能被正确获取：

$(function() {
  $('#dateRange').daterangepicker({
    startDate: moment().subtract(7, 'days'),
    endDate: moment(),
    locale: {
      format: 'YYYY-MM-DD',
      applyLabel: '确定',
      cancelLabel: '取消'
    },
    // 其他自定义配置，比如日期范围限制、快捷选项等
  });
});

4. 在Modal打开时触发日期选择器显示 #

根据你的自定义Modal的显示逻辑，选择对应的触发时机：

场景A：Modal通过JS函数控制显示 #

如果是通过自定义函数打开Modal，就在函数内部Modal显示完成后调用daterangepicker的show()方法：

// 自定义打开Modal的函数
function openDateModal() {
  const $modal = $('#datePickerModal');
  // 显示Modal（这里假设是直接修改display属性，根据你的实际实现调整）
  $modal.css('display', 'block');
  
  // 等待Modal的动画/渲染完成，避免日期选择器定位错误
  setTimeout(() => {
    // 获取daterangepicker实例并调用show方法
    $('#dateRange').data('daterangepicker').show();
  }, 150); // 延迟时间根据你的Modal动画时长调整，一般100-200ms足够
}

// 页面加载完成后自动打开Modal并显示日期选择器
$(window).on('load', function() {
  openDateModal();
});

场景B：Modal通过类切换显示（比如添加active类） #

如果Modal是通过添加/移除类来控制显示状态，可以监听类的变化或者在添加类后触发显示：

// 打开Modal的逻辑
function openDateModal() {
  const $modal = $('#datePickerModal');
  $modal.addClass('active');
  
  // 监听Modal的过渡结束事件，确保完全显示后再触发
  $modal.one('transitionend', function() {
    $('#dateRange').data('daterangepicker').show();
  });
}

// 页面加载后执行
$(window).on('load', openDateModal);

关键注意点 #

• 必须等Modal完全显示后再调用show()，否则日期选择器可能会被Modal遮挡，或者定位到错误位置。
• 如果初始化时设置了autoUpdateInput: false，需要手动处理输入框的显示值，避免输入框为空。
• 确保$('#dateRange').data('daterangepicker')能正确获取到实例，不要重复初始化daterangepicker。

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