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

Question

我正在尝试将波斯日历添加到 WooCommerce 中的自定义结帐字段。 我已将波斯语 datepicker JS 和 CSS 文件添加到我的主题中，并添加了必要的 javascript 进行初始化，如 "Persian Date Picker" documentation 中所述。

我添加了这段代码来排队 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文件正在加载中，代码没问题。但没有显示日历或日期选择器。

感谢任何想法或帮助。

Answer 1

你的代码有很多错误，比如：

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 代码中嵌入日期选择器初始化（请参阅我的答案代码）。

5. 您应该使用缩小的 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 文件中。

由于 datepicker JS 文件中的错误已测试但不起作用（请参阅提供的屏幕截图）。