WordPress中WooCommerce日期输入框格式修改无效求助

问题症结分析 #

你遇到的问题核心原因有两个：

• 原生HTML5 <input type="date"> 的显示格式由浏览器完全控制，无法通过data-date-format这类自定义属性强制修改；
• 你使用type="date"后，原生日期控件会覆盖jQuery UI Datepicker的绑定，且JS中的选择器#date_naissance错误——WooCommerce自动生成的字段ID是billing_date_naissance。

完整解决方案 #

按以下步骤修改代码，即可实现自定义格式的出生日期字段：

1. 更新functions.php代码

替换原有字段添加和脚本加载代码，改为以下内容：

// 在结账页面添加出生日期字段
function date_naissance_field( $fields ) {
    $fields['billing']['date_naissance'] = array(
        'type'        => 'text', // 将type从date改为text，避免原生控件干扰
        'label'       => __( '出生日期' ),
        'class'       => array( 'form-row-wide', 'date-picker-field' ),
        'required'    => true,
        'clear'       => true,
        'autocomplete' => 'off',
        'placeholder' => 'DD/MM/YYYY', // 添加格式提示占位符
    );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'date_naissance_field' );

// 加载jQuery UI Datepicker的JS和CSS资源
function enqueue_custom_datepicker_scripts() {
    // 加载jQuery UI官方样式
    wp_enqueue_style( 'jquery-ui-datepicker', '//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css' );
    // 加载自定义JS文件
    wp_enqueue_script( 'custom-datepicker', get_stylesheet_directory_uri() . '/custom-datepicker.js', array( 'jquery', 'jquery-ui-datepicker' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_datepicker_scripts' );

// 将出生日期字段值保存到订单元数据
function save_date_naissance_field( $order_id ) {
    if ( ! empty( $_POST['billing_date_naissance'] ) ) {
        update_post_meta( $order_id, '_billing_date_naissance', sanitize_text_field( $_POST['billing_date_naissance'] ) );
    }
}
add_action( 'woocommerce_checkout_update_order_meta', 'save_date_naissance_field' );

// 在后台订单编辑页显示出生日期
function display_date_naissance_in_order( $order ) {
    echo '<p><strong>' . __( '出生日期' ) . ':</strong> ' . get_post_meta( $order->get_id(), '_billing_date_naissance', true ) . '</p>';
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_date_naissance_in_order', 10, 1 );

2. 修改custom-datepicker.js代码

修正选择器并完善日期选择器配置：

(function($) {
    $(document).ready(function() {
        // 绑定正确的字段ID：billing_date_naissance
        $("#billing_date_naissance").datepicker({
            dateFormat: "dd/mm/yy", // yy自动转换为4位年份
            changeMonth: true,
            changeYear: true,
            yearRange: "1900:" + new Date().getFullYear(), // 设置合理的年份选择范围
            showButtonPanel: true
        });

        // 表单提交前验证日期格式
        $('form.checkout').on('submit', function() {
            var dateVal = $("#billing_date_naissance").val();
            var dateRegex = /^\d{2}\/\d{2}\/\d{4}$/;
            if (!dateRegex.test(dateVal)) {
                alert('请输入正确的日期格式：DD/MM/YYYY');
                return false;
            }
        });
    });
})(jQuery);

关键修改点说明 #

• 字段类型改为text：规避原生HTML5日期控件的格式限制，让jQuery UI Datepicker完全接管字段交互；
• 修正字段选择器：WooCommerce结账字段的ID规则为billing_+字段名，必须使用#billing_date_naissance才能正确绑定；
• 加载jQuery UI样式：之前仅加载JS资源会导致日期选择器无样式、无法正常使用；
• 添加订单数据处理逻辑：确保用户输入的日期能被保存并在后台订单页显示；
• 前端格式验证：通过正则表达式拦截不符合格式的输入，提升用户体验。

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