1

我正在尝试将波斯日历添加到 WooCommerce 中的自定义结帐字段。我已将波斯日期选择器 JS 和 CSS 文件添加到我的主题中，并添加了必要的 javascript 进行初始化，如“波斯日期选择器”文档中所述。

我将此代码添加到排队 css 和 js 文件。

function add_theme_scripts() {
    wp_enqueue_style( 'persiandatepicker', get_template_directory_uri() . '/css/persian-datepicker.css', array(), '1.1', 'all');
    wp_enqueue_script( 'persiandate', get_template_directory_uri() . '/js/persian-date.js', array ( 'jquery' ), '1.1', false);
    wp_enqueue_script( 'persiandatepickerjs', get_template_directory_uri() . '/js/persian-datepickerjs.js', array ( 'jquery' ), '1.1', false);
    wp_enqueue_script( 'mydatepicker', get_template_directory_uri() . '/js/my-datepicker.js', array ('jquery'),null, false);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

my-datepicker.js 文件（用于 datepicker 初始化）：

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".hasdatepicker").pDatepicker(); 
});
</script>

以及以下用于添加新日期字段的代码（我已经放置了部分代码，因为我也向 woocommerce 结帐页面添加了一些额外的自定义字段）：

add_action('woocommerce_after_order_notes', 'customise_checkout_field');

function customise_checkout_field($checkout) {

    woocommerce_form_field( 'billing_date', array(
        'type' => 'text',
        'class' =>array('form-row-first','hasdatepicker'),
        'label' => __('تاریخ نصب'),
        'required' => false,
        'dateFormat'=> 'dd-mm-yy'
    ), $checkout->get_value( 'billing_date' ));


    // echo '<input type="text" class="hasdatepicker" />'; // For testing purpose
}

正如您在上面代码末尾看到的那样，我什至输入了一个带有 class="hasdatepicker" 的输入，但它也没有显示日期选择器。js和css文件正在加载中，代码没问题。但没有显示日历或日期选择器。

任何想法或帮助表示赞赏。

4

1 回答 1

0

您的代码中有很多错误，例如：

  1. 在 Wordpress 中，对于 jquery 脚本，您需要启动您需要jQuery在启动时使用这种方式：

    jQuery(document).ready(function($) { 
    $(".hasdatepicker").pDatepicker(); 
});

  2. 在外部 JS 文件中，您不必使用<script type="text/javascript"> … </script>html 标签。

  3. 在您的 Woocommerce 表单字段中，您需要使用以下命令将 datepicker 类添加到输入字段：

    'input_class' => array('hasdatepicker'),

  4. 您可以在您的 php 代码中嵌入 datepicker 初始化（请参阅我的答案代码）。

  5. 您应该使用缩小的 JS 依赖项而不是未压缩的依赖项……</p>

还有一些其他的……</p>

现在我已经对此进行了测试，并且这个波斯日历日期选择器存在一个错误：

在此处输入图像描述

所以你应该把它报告给 jQuery 插件作者……</p>

这是正确的代码：

// Date picker field and initialization
add_action('woocommerce_after_order_notes', 'custom_checkout_fields_after_order_notes');
function custom_checkout_fields_after_order_notes( $checkout ) {

    woocommerce_form_field( 'billing_date', array(
        'type'          => 'text',
        'label'         => __('تاریخ نصب'),
        'class'         => array('form-row-first'),
        'input_class'   => array('hasdatepicker'),
        'required'      => false,
    ), '');

    // Date picker Initialization script
    ?>
    <script type="text/javascript">
    jQuery(function($) {
        $(".hasdatepicker").pDatepicker({
            initialValue: false
        });
    });
    </script>
    <?php
}

// Register JS and CSS scripts:
add_action( 'wp_enqueue_scripts', 'add_persian_date_picker_scripts' );
function add_persian_date_picker_scripts() {
    // Only on checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ) :

    // $path = get_stylesheet_directory_uri(); // The path for child theme
    $path = get_template_directory_uri(); // The path for parent theme (without a child theme)

    // (Use minified file versions, instead of uncompressed
    wp_enqueue_style( 'persiandatepicker', $path . '/css/persian-datepicker.css', array(), '1.1', 'all');
    wp_enqueue_script( 'persiandate', $path . '/js/persian-date.js', array ( 'jquery' ), '1.1', false);
    wp_enqueue_script( 'persiandatepickerjs', $path . '/js/persian-datepickerjs.js', array ( 'jquery' ), '1.1', false);

    endif;
}

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

经过测试但由于 datepicker JS 文件中的错误而无法正常工作（请参阅提供的屏幕截图）。

于 2019-03-18T10:53:22.350 回答