如何在WooCommerce配送日期字段中屏蔽指定日期？

完全可以通过自定义代码实现这个需求，核心是利用日期选择器的beforeShowDay回调过滤不可选日期，具体操作步骤如下：

1. 确认自定义日期字段的ID #

先找到你在Checkout Field Editor中添加的配送日期字段的HTML ID：

• 打开结账页面，右键点击日期选择器输入框，选择「检查」
• 在开发者工具的Elements面板中，找到该输入框的id属性值（示例值：shipping_delivery_date）

2. 添加自定义代码 #

将以下代码添加到你的主题functions.php文件，或者自定义插件中：

add_action( 'wp_enqueue_scripts', 'disable_specific_delivery_dates' );
function disable_specific_delivery_dates() {
    // 仅在结账页面加载代码
    if ( is_checkout() && ! is_wc_endpoint_url() ) {
        // 加载jQuery UI日期选择器依赖
        wp_enqueue_script( 'jquery-ui-datepicker' );
        
        // 注入自定义过滤逻辑
        wp_add_inline_script( 'jquery-ui-datepicker', '
            jQuery(document).ready(function($) {
                // 替换为你的日期字段ID
                const dateField = $("#shipping_delivery_date");
                
                // 定义需要屏蔽的日期范围（格式：YYYY-MM-DD）
                const disabledStart = new Date("2024-11-01");
                const disabledEnd = new Date("2024-11-03");
                
                // 配置日期选择器的过滤规则
                dateField.datepicker("option", "beforeShowDay", function(date) {
                    // 判断当前日期是否在屏蔽范围内
                    const isDisabled = date >= disabledStart && date <= disabledEnd;
                    // 返回数组：[是否可选, 自定义CSS类, 悬停提示文本]
                    return [!isDisabled, "", isDisabled ? "该日期无法安排配送" : ""];
                });
            });
        ' );
    }
}

3. 代码调整说明 #

• 把#shipping_delivery_date替换成你实际找到的字段ID
• 修改disabledStart和disabledEnd的值，设置你需要屏蔽的日期范围
• 悬停提示文本可以根据需求自行修改

如果你的日期选择器不是基于jQuery UI实现的，需要根据插件实际使用的日期组件调整代码，但绝大多数同类插件都会依赖jQuery UI，所以上述代码基本通用。

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