在WooCommerce Checkout自定义文本字段中启用Datepicker [英] Enable Datepicker in a WooCommerce Checkout custom text field

问题描述

在WooCommerce中，我可以将一个字段关联到我的WooCommerce购物车页面&在主题的(Storefront)函数PHP中使用以下命令显示OK:

In WooCommerce, I can get a field hooked into my WooCommerce cart page & showing up OK using the following in my theme's (Storefront) functions PHP:

<?
            // 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']));
            }
            ?>

但是，当您单击该字段时，不会启动datepicker小部件.我知道要使JQuery起作用，标题中需要以下代码:

However, the datepicker widget is not initiated when you click into the field. I know the following code is required in the header for JQuery to work:

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

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

This did not work for me, so I thought to put this function into the checkout.js file in Storefront theme, but the added field didn't have calendar widget functionality.

其中有很多.js，我需要为包含一个新的.js吗?

There's a lot of .js in the them do I need to start a new one for includes?

推荐答案

首先，您需要:

• 使主jquery-ui datepicker脚本入队
• 更改以jQuery(function($){而不是$(function(){开头的自定义脚本...

• Enqueu main jquery-ui datepicker script
• Change your custom script starting it with jQuery(function($){ instead of $(function(){ …

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

So to enable datepicker for your custom text field your code will be:

// 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文件或任何插件文件中.

经过测试，可以正常工作.在店面主题中，您将得到:

Tested and works. On storefront theme you will get that:

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

You may need to style it…

这篇关于在WooCommerce Checkout自定义文本字段中启用Datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！