在 Woocommerce 结帐字段中启用日期选择器

Question

我正在尝试将 woocomerce 中的结帐字段从 addres1 和 addres2 更改为签入和结帐。我想在这两个字段上使用 Datepiker。这是我已更改的WC_Countries Class 核心代码的摘录：

            '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 但它不起作用......

有没有办法将Datepicker 添加到 woocommerce 的结帐字段中？

Answer 1

首先永远不要覆盖 Woocommerce 核心文件... 强烈建议不要这样做，这样可以避免很多问题。

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

您可以尝试以下代码示例，该示例将添加一个启用了 jQuery UI 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' );
    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 文件中。经过测试并且可以工作。

你会得到类似的东西：

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