如何修改WooCommerce Bookings日期选择器，支持年月下拉选择？

可以用jQuery UI Datepicker的changeMonth和changeYear选项实现需求——WooCommerce Bookings的日期选择器底层基于jQuery UI Datepicker，只是默认未启用这些选项。以下是具体实现步骤：

1. 向主题/子主题添加自定义JS脚本 #

第一步：在主题中注册脚本 #

将以下代码添加到主题（或子主题）的functions.php文件中：

add_action( 'wp_enqueue_scripts', 'custom_booking_datepicker_tweaks' );
function custom_booking_datepicker_tweaks() {
    // 仅在可预订的产品页面加载脚本
    if ( is_product() && get_post_meta( get_the_ID(), '_booking_type', true ) ) {
        wp_enqueue_script(
            'custom-booking-datepicker',
            get_stylesheet_directory_uri() . '/js/custom-booking-datepicker.js',
            array( 'jquery-ui-datepicker', 'wc-bookings-booking-form' ),
            wp_get_theme()->get('Version'),
            true
        );
    }
}

第二步：创建自定义JS文件 #

在主题（或子主题）目录下新建js文件夹，再创建custom-booking-datepicker.js文件，写入以下代码：

jQuery(document).ready(function($) {
    // 延迟执行，确保WooCommerce Bookings已初始化日期选择器
    setTimeout(function() {
        $('.wc-bookings-datepicker').each(function() {
            // 获取当前日期选择器的配置选项
            var currentOptions = $(this).datepicker('option');
            
            // 启用月份和年份下拉选择
            currentOptions.changeMonth = true;
            currentOptions.changeYear = true;
            // 设置年份范围为当前年到下一年（匹配提前一年预订的需求）
            currentOptions.yearRange = 'c:c+1';
            
            // 销毁原实例并重新初始化，使新选项生效
            $(this).datepicker('destroy').datepicker(currentOptions);
        });
    }, 500);
});

关键说明 #

• 使用setTimeout是因为WooCommerce Bookings会动态渲染日期选择器，页面加载完成后不会立刻初始化，延迟执行能确保我们修改的是已初始化好的实例。如果500ms不够，可调整为1000ms。
• yearRange参数可按需修改：比如'2024:2025'指定固定年份范围，'-1:+1'表示前后各一年。
• 建议使用子主题修改，避免主题更新时丢失代码。

测试与调试 #

1. 保存修改后清空网站及浏览器缓存。
2. 打开可预订产品页面，检查日期选择器是否出现月份/年份下拉菜单。
3. 若未生效，打开浏览器控制台（F12）查看JS报错，调整延迟时间或检查文件路径是否正确。

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