Contact Form 7整合自定义日期下拉菜单功能失效问题求助

失效核心原因 #

1. 脚本执行时机错误：内联脚本会在浏览器解析到的瞬间执行，此时Contact Form 7尚未完成表单DOM渲染，document.getElementById("dates1")返回空值，后续所有操作都无法生效。
2. 代码存在语法错误：你在opt变量未完成赋值前就执行了combodts.add(opt, 0)，此时opt为undefined，会抛出JS异常阻断后续代码运行。
3. 日期筛选逻辑冗余：currentDate.getDay() < 5 || currentDate.getDay() > 5本质就是排除周五，逻辑写法不直观但不影响功能运行。

修复方案 #

• 把所有JS逻辑包裹在CF7专属的表单渲染完成事件wpcf7:rendered中，确保执行时表单DOM已经存在
• 删除无意义的未定义opt新增操作代码行
• 优化日期生成逻辑避免出现时区偏差

完整可运行代码 #

<script>
function GetDates(daysToAdd, startDate = new Date()) {
  var aryDates = [];
  var i = 0;
  var dts = 0;
  while (dts < daysToAdd) {
    // 修复日期计算偏差问题，直接基于startDate生成新日期
    var currentDate = new Date(startDate.getTime());
    currentDate.setDate(startDate.getDate() + i);
    // 等价于排除周五，写法更直观
    if (currentDate.getDay() !== 5) {
      aryDates.push(DayAsString(currentDate.getDay()) + ", " + currentDate.getDate() + " " + MonthAsString(currentDate.getMonth()) + " " + currentDate.getFullYear());
      dts ++;
    }
    i ++;
  }
  return aryDates;
}

function MonthAsString(monthIndex) {
  var month = ["يناير","فبراير","مارس","أبريل","مايو","يونيو","يوليو","أوت","سبتمبر","أكتوبر","نوفمبر","ديسمبر"];
  return month[monthIndex];
}

function DayAsString(dayIndex) {
  var weekdays = ["الأحد","الإثنين","الثلثاء","الأربعاء","الخميس","الجمعة","السبت"];
  return weekdays[dayIndex];
}

// 监听CF7表单渲染完成事件，确保DOM已加载
document.addEventListener('wpcf7:rendered', function() {
  var aryDates = GetDates(7);
  var combodts = document.getElementById("dates1");
  if (!combodts) return;
  combodts.options.length = 0;
  for (var i = 0; i < aryDates.length; i++) {
    var opt = document.createElement("option");
    opt.text = aryDates[i];
    opt.value = aryDates[i]; // 建议value存日期字符串而非索引，方便后续表单数据处理
    combodts.add(opt);
  }
});
</script>

<h3>المعلومات الشخصية:</h3>
<label> الإسم الكامل (مطلوب):
    [text* f-name] </label>

<label> بريدك الإلكتروني (مطلوب):
    [email* c-email] </label>

<label> رقم الهاتف (مطلوب):
[tel phone] </label>

<h3>خيارات الموعد:</h3>
<label> تاريخ الموعد (مطلوب)
[select date id:dates1]</label>

<label> الوقت المناسب للموعد (مطلوب)</label>
[radio tyme "الفترة الصباحية" "الفترة المسائية"]

<h3>وصف الحالة</h3>
<label> وصف للحالة (مطلوب)
    [textarea* desc] </label>

[submit "تقديم الطلب"]

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