WordPress/Elementor Pro如何设置预约表单动态最小可选日期

该需求完全可以实现，无需安装额外第三方预约插件，仅需依托Elementor Pro表单原生组件搭配少量自定义JS代码即可完成，不会破坏现有联系表单的提交流程、邮件通知等原有配置。

• 确认日期字段ID
  进入WordPress后台打开作品集网站的Elementor编辑器，选中联系表单里的日期选择字段，在右侧编辑面板的「高级」选项卡下找到字段ID，默认值通常为date，如果你做过自定义修改，记录下你设置的ID即可。
• 注入自定义JS代码
  两种放置方式二选一即可：
  1. 打开对应表单所在页面的Elementor编辑器，拖入一个「HTML」组件放在页面最底部，将下述代码粘贴到组件内容区
  2. 进入WordPress后台「外观」-「自定义」面板，找到「自定义JS」输入框，粘贴下述代码后全站保存
     对应代码如下（记得把代码里的字段ID替换成你自己的）：

document.addEventListener('DOMContentLoaded', function() {
    // 下方form_fields[date]里的date替换为你自己的日期字段ID
    const dateInput = document.querySelector('input[name="form_fields[date]"]');
    
    const setDateLimit = () => {
        if (!dateInput?._flatpickr) return;
        // 当日起7天内不可选，最小可选日期为当前日期向后推7天
        dateInput._flatpickr.set('minDate', new Date().fp_incr(7));
        // 不设置最大可选日期限制
        dateInput._flatpickr.set('maxDate', null);
    }

    setDateLimit();

    // 兼容Elementor弹窗加载表单的场景
    jQuery(document).on('elementor/popup/show', setDateLimit);
});

• 效果验证
  保存代码后清空网站缓存（含缓存插件缓存、服务器缓存、本地浏览器缓存），前端打开页面点击日期选择框，确认当日至未来第7天的日期均为置灰状态无法点击，第8天及之后的日期可正常选中，表单提交功能无异常即配置完成。

提示：如果后续需要调整禁止选择的天数，直接修改代码中fp_incr(7)括号内的数值即可，比如要设置14天内不可选就将数值改为14。

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