Elementor弹窗内Contact Form7日期时间选择器失效求助

你的判断方向正确，故障本质是初始化时机和DOM可见性问题：

• Elementor Popup默认采用动态注入逻辑，DOM节点会在触发弹窗时才插入到body末尾，且初始状态为display: none
• 绝大多数Contact Form 7配套的datetimepicker插件，默认只会在页面首次加载完成（DOMContentLoaded事件触发）时扫描全页DOM，查找目标输入框完成绑定。此时弹窗内的表单DOM要么还未渲染，要么处于隐藏状态，日期选择器无法完成绑定、计算定位参数，自然无法正常触发。

按稳定性从高到低排序：

方案1：绑定弹窗打开事件重初始化（推荐） #

放弃页面加载时全量初始化的逻辑，改为监听Elementor弹窗的原生打开完成事件，等弹窗完全渲染、展示后再初始化内部表单的日期选择器。
将对应代码加入主题自定义JS（外观→自定义→额外JS）或Elementor全局自定义JS面板即可：

// 监听Elementor弹窗完全展示事件
jQuery(document).on('elementor/popup/show', (event, id, instance) => {
  // 查找当前弹窗内的日期选择器输入框
  jQuery(instance.$el).find('.wpcf7-form input.datetimepicker-input').each(function(){
    // 已绑定的实例先销毁，避免重复绑定冲突
    if(jQuery(this).hasClass('hasDatepicker')) {
      jQuery(this).datetimepicker('destroy');
    }
    // 此处替换为你原有项目中datetimepicker的配置参数
    jQuery(this).datetimepicker({
      dateFormat: 'yy-mm-dd',
      timeFormat: 'HH:mm'
    });
  });
});

如果使用的是主流CF7 DateTime Picker官方插件，无需手动写配置，直接调用插件自带的初始化方法即可：

jQuery(document).on('elementor/popup/show', () => {
  if (typeof wpcf7dtp !== 'undefined') {
    wpcf7dtp.init();
  }
});

方案2：调整弹窗配置（无代码方案） #

在Elementor弹窗设置项中做两个调整：

• 关闭弹窗的「按需加载DOM」选项，让弹窗DOM在页面初始加载时就渲染完成，而非点击触发时才注入
• 若配置项支持，将弹窗初始隐藏方式从display: none改为opacity: 0 + 视口外绝对定位，保证datetimepicker初始化时能正确获取输入框的尺寸、位置参数
  注意：该方案会拖慢页面首屏加载速度，弹窗内容较多时优先选择方案1

方案3：事件委托兜底（多场景兼容） #

如果存在多弹窗复用表单、弹窗事件监听失效的情况，可以用输入框聚焦事件触发初始化，兼容所有动态插入DOM的场景：

jQuery(document).on('focus', '.wpcf7-form input.datetimepicker-input', function(){
  if(!jQuery(this).hasClass('hasDatepicker')) {
    // 此处替换为原有datetimepicker配置
    jQuery(this).datetimepicker({
      dateFormat: 'yy-mm-dd',
      timeFormat: 'HH:mm'
    });
  }
});

• 代码添加完成后，先清空WordPress缓存、CDN缓存、Elementor自带的静态资源缓存再测试，避免旧JS逻辑缓存导致修复不生效
• 如果开启了Elementor性能优化里的JS延迟加载、延迟DOM渲染功能，先临时关闭测试，确认问题修复后再将自定义JS、datetimepicker相关JS加入延迟加载排除列表
• 初始化datetimepicker时不要直接用全局选择器扫描全页DOM，要限定在当前触发的弹窗DOM范围内查找输入框，避免和页面其他位置的日期选择器产生绑定冲突

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