在 WooCommerce Checkout 自定义文本字段中启用 Datepicker

Posted 2023-05-07

【中文标题】在 WooCommerce Checkout 自定义文本字段中启用 Datepicker

【英文标题】：Enable Datepicker in a WooCommerce Checkout custom text field

【发布时间】：2018-04-13 05:40:59

【问题描述】：

在 WooCommerce 中，我可以在我的主题（店面）函数 php 中使用以下内容将一个字段连接到我的 WooCommerce 购物车页面并显示 OK：

<?
            // ADD Custom Fields to Checkout Page
            /**
             * Add the field to the checkout
             **/

            add_action('woocommerce_after_order_notes', 'my_custom_checkout_field');

            function my_custom_checkout_field( $checkout ) 

                date_default_timezone_set('America/Los_Angeles');
                $mydateoptions = array('' => __('Select PickupDate', 'woocommerce' )); 

                echo '<div id="my_custom_checkout_field"><h3>'.__('Delivery Info').'</h3>';

               woocommerce_form_field( 'order_pickup_date', array(
                    'type'          => 'text',
                    'class'         => array('my-field-class form-row-wide'),
                    'id'            => 'datepicker',
                    'required'      => true,
                    'label'         => __('Delivery Date'),
                    'placeholder'       => __('Select Date'),
                    'options'     =>   $mydateoptions
                    ),$checkout->get_value( 'order_pickup_date' ));

                echo '</div>';
            

            /**
             * Process the checkout
             **/
            add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

            function my_custom_checkout_field_process() 
                global $woocommerce;

                // Check if set, if its not set add an error.
                if (!$_POST['order_pickup_date'])
                     wc_add_notice( '<strong>PickupDate</strong> ' . __( 'is a required field.', 'woocommerce' ), 'error' );
            

            /**
             * Update the order meta with field value
             **/
            add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta');

            function my_custom_checkout_field_update_order_meta( $order_id ) 
                if ($_POST['order_pickup_date']) update_post_meta( $order_id, 'PickupDate', esc_attr($_POST['order_pickup_date']));
            
            ?>

但是，当您单击该字段时，不会启动日期选择器小部件。我知道 JQuery 工作的标头中需要以下代码：

<script>
$( function() 
$( "#datepicker" ).datepicker();  );
</script>

这对我不起作用，所以我想将此功能放入 Storefront 主题中的 checkout.js 文件中，但添加的字段没有日历小部件功能。

其中有很多 .js，我需要为包含内容创建一个新的吗？

【问题讨论】：

您是否遇到任何错误，请检查控制台日志？

【参考方案1】：

首先你需要：

入队主 jquery-ui 日期选择器脚本 更改以jQuery(function($) 开头的自定义脚本，而不是$(function() ...

因此，要为您的自定义文本字段启用 datepicker，您的代码将是：

// Register main datepicker jQuery plugin script
add_action( 'wp_enqueue_scripts', 'enabling_date_picker' );
function enabling_date_picker() 

    // Only on front-end and checkout page
    if( is_admin() || ! is_checkout() ) return;

    // Load the datepicker jQuery-ui plugin script
    wp_enqueue_script( 'jquery-ui-datepicker' );


// Call datepicker functionality in your custom text field
add_action('woocommerce_after_order_notes', 'my_custom_checkout_field', 10, 1);
function my_custom_checkout_field( $checkout ) 

    date_default_timezone_set('America/Los_Angeles');
    $mydateoptions = array('' => __('Select PickupDate', 'woocommerce' ));

    echo '<div id="my_custom_checkout_field">
    <h3>'.__('Delivery Info').'</h3>';

    // YOUR SCRIPT HERE BELOW 
    echo '
    <script>
        jQuery(function($)
            $("#datepicker").datepicker();
        );
    </script>';

   woocommerce_form_field( 'order_pickup_date', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'id'            => 'datepicker',
        'required'      => true,
        'label'         => __('Delivery Date'),
        'placeholder'       => __('Select Date'),
        'options'     =>   $mydateoptions
        ),$checkout->get_value( 'order_pickup_date' ));

    echo '</div>';

代码进入您的活动子主题（或主题）的 function.php 文件或任何插件文件中。

经过测试并且有效。在店面主题上，您会得到：

您可能需要对其进行样式设置...

【参考方案2】：

只是一个不再需要的更新。使用 Woocommerce，您可以简单地将样式更改为“日期”，它会为您处理其余部分 - 雅虎！

【讨论】：

正如@shaneonabike 提到的，当您调用woocommerce_form_field() 时，请传入'type' => 'date'，因为这是支持的字段类型：woocommerce.github.io/code-reference/files/…