在Woocommerce结帐字段中启用日期选择器 [英] Enabling a date-picker in Woocommerce checkout fields

问题描述

我正在尝试将woocomerce中的checkout字段从addres1和addres2更改为checkin和checkout.我想在这两个字段上使用Datepiker.这是我已更改的WC_Countries类核心代码的摘录:

I'm trying to change checkout fields in woocomerce, from addres1 and addres2 to checkin, and checkout. I would like to use Datepiker on those two fields. This is an extract of my WC_Countries Class core code that I have changed:

            'checkin'  => array(
            'id'           =>'datepicker',
            'label'        => __( 'check in', 'woocommerce' ),
            'placeholder'  => __( 'check in', 'woocommerce' ),
            'required'     => false,
            'class'        => array( 'form-row-wide',),
            'autocomplete' => 'datepicker',
            'priority'     => 50,
        ),
        'checkout'  => array(
            'id'           =>'datepicker',
            'placeholder'  => __( 'check out', 'woocommerce' ),
            'class'        => array( 'form-row-wide'),
            'required'     => false,
            'autocomplete' => 'datepicker',
            'priority'     => 60,

我也添加了

    $('#sandbox-container .input-daterange').datepicker({
});

到主题目录中的我的custom.scripts.js，但这不起作用…

To my custom.scripts.js in themes directory but it doesn't work…

是否可以添加 Datepicker 进入woocommerce的结帐字段?

Is there any way to add Datepicker in to the checkout fields in woocommerce?

推荐答案

首先切勿覆盖Woocommerce核心文件………我们强烈建议不要这样做，这样可以避免出现很多问题.

First NEVER override Woocommerce core files… Is strictly discouraged and will avoid you many problems.

相反，您可以使用所有数千个可用的钩子，可编辑的模板或扩展现有的类……

Instead you can use all thousands of available hooks, editable templates or extend existing classes…

您可以尝试以下代码示例，该示例将添加一个启用了 jQuery UI datepicker 的自定义结帐字段:

You can try the following code example that will add a custom checkout field with jQuery UI datepicker enabled for it:

// 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' );
    wp_enqueue_style('jquery-ui', "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css", '', '', false);
}

// Add custom checkout datepicker field
add_action( 'woocommerce_before_order_notes', 'datepicker_custom_field' );
function datepicker_custom_field($checkout) {
    $datepicker_slug = 'my_datepicker';

    echo '<div id="datepicker-wrapper">';

    woocommerce_form_field($datepicker_slug, array(
        'type' => 'text',
        'class'=> array( 'form-row-first my-datepicker'),
        'label' => __('My Custom Date-picker'),
        'required' => true, // Or false
    ), '' );

    echo '<br clear="all"></div>';


    // Jquery: Enable the Datepicker
    ?>
    <script language="javascript">
    jQuery( function($){
        var a = '#<?php echo $datepicker_slug ?>';
        $(a).datepicker({
            dateFormat: 'yy-mm-dd', // ISO formatting date
        });
    });
    </script>
    <?php
}

代码进入您的活动子主题(或活动主题)的function.php文件中.经过测试并可以正常工作.

Code goes in function.php file of your active child theme (or active theme). Tested and works.

您将得到类似的东西:

在第一个功能中，您将能够轻松更改样式以与Bootstap样式相匹配...

In the first function, you will be able to change the styling easily to match with Bootstap styles…

这篇关于在Woocommerce结帐字段中启用日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！