Adding custom Persian calendar datepicker to Woocommerce checkout fields

Question

I'm trying to add a Persian calendar to a custom checkout field in WooCommerce. I've added the Persian datepicker JS and CSS files to my theme and added the necessary javascript for initialization as described on the "Persian Date Picker" documentation.

I added this code to enqueue css and js files.

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' );

The my-datepicker.js file (for datepicker initialization):

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

And the following code for adding new date field (I have put some part of code because I've added some extra custom fields to woocommerce checkout page, too):

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
}

As you see at the end of the above code, I even put an input with class="hasdatepicker" and it doesn't show the datepicker too. The js and css files are being loaded and the code is Okay. but the calendar or datepicker isn't being shown.

Any idea about or help is appreciated.

Answer 1

There is many errors in your code, like:

1. In Wordpress, for jquery scripts, you need to start you need to use jQuery at start this way:

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

2. In an external JS file, you don't have to use <script type="text/javascript"> … </script> html tags.

3. in your Woocommerce form field, you need to add your datepicker class to the input field using:

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

4. You can embed the datepicker initialization in your php code (see in my answer code).

5. You should use the minified JS dependencies instead of uncompressed ones…

And some other things…

---

Now I have tested this and there is a bug with this Persian calendar datepicker:

So you should report it to the jQuery plugin author …

---

Here is the correct code:

// 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;
}

code goes in function.php file of your active child theme (or active theme).

Tested but doesn't work due to a bug in the datepicker JS file (see the prodided screenshot).