Question

我正在尝试将波斯日历添加到WooCommerce的自定义结帐字段中。我已经将波斯datepicker JS和CSS文件添加到主题中，并按照"Persian Date Picker" documentation中的说明添加了用于初始化的必要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文件（用于日期选择器初始化）：

<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文件正在加载，代码正常。但没有显示日历或日期选择器。

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

Answer 1

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

在Wordpress中，对于jquery脚本，您需要启动，您需要使用以下方式启动jQuery：
```
jQuery(document).ready(function($) { 
    $(".hasdatepicker").pDatepicker(); 
});
```
在外部JS文件中，您不必使用<script type="text/javascript"> … </script> html标记。
在Woocommerce表单字段中，您需要使用以下方法将datepicker类添加到输入字段中：
```
'input_class' => array('hasdatepicker'),
```
您可以将datepicker初始化嵌入到您的php代码中（请参见我的应答代码）。
您应该使用缩小的JS依赖项，而不是未压缩的依赖项...

还有其他一些事情……

现在我已经测试，并且此波斯日历日期选择器存在错误：



因此，您应该将其报告给jQuery插件作者…

这是正确的代码：

// 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文件中。

经过测试，但由于日期选择器JS文件中的错误而无法使用（请参见成品屏幕截图）。

将自定义波斯日历日期选择器添加到Woocommerce结帐字段

1 个答案: