Contact Form 7使用jquery-ui-datepicker禁用周六不生效怎么解决

API 探路者

2026-9-25

排查解决步骤

1. 修复输入框类型冲突

jquery-ui-datepicker 无法绑定原生type="date"的输入框，Contact Form 7 默认输出的date短代码为原生日期控件，你需要修改短代码强制输出文本类型输入框：

[date* your-date date-479 id:datepiicker min:today placeholder "date de reservation*" html:type="text"]

如果你的站点已经开启了CF7的jQuery UI日期控件替代功能，可跳过这一步，直接检查ID是否匹配

2. 确认选择器与实际DOM ID一致

打开浏览器开发者工具，检查页面上的日期输入框ID是否为datepiicker，确认没有拼写错误（注意你写的ID是datepiicker而非常见的datepicker，不要写错）。

3. 避免初始化配置被覆盖

Contact Form 7 会自动初始化日期控件，直接在document.ready里绑定配置可能被CF7的默认配置覆盖，需要用CF7的初始化完成事件来执行你的自定义配置，修改后的jQuery代码如下：

jQuery(document).on('wpcf7init', function() {
    jQuery("#datepiicker").datepicker("option", "beforeShowDay", function(date) {
        var day = date.getDay();
        // 6对应周六，0对应周日，如果需要同时禁用周日可以改成 return [(day != 0 && day != 6), '']
        return [(day != 6), ''];
    });
});

如果上述代码不生效，可以尝试延后执行时机：

jQuery(document).ready(function($) {
    setTimeout(function() {
        $("#datepiicker").datepicker("option", "beforeShowDay", function(date) {
            var day = date.getDay();
            return [(day != 6), ''];
        });
    }, 300);
});

如果控制台报「cannot call methods on datepicker prior to initialization」错误，把代码里的datepicker("option", 配置)改为直接datepicker(配置)即可。