CODEWITHSUNDEEP
phpjquerywoocommercedatepickercheckout
marcin
marcin

Reputation: 23

Enabling a date-picker in Woocommerce checkout fields

I'm trying to change checkout fields in woocomerce, from addres1 and addres2 to checkin, and checkout. I would like to use Datepiker on those two fields. This is an extract of my WC_Countries Class core code that I have changed:

            '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,

I have also add 

    $('#sandbox-container .input-daterange').datepicker({
});

To my custom.scripts.js in themes directory but it doesn't work…

Is there any way to add Datepicker in to the checkout fields in woocommerce?

Upvotes: 2

Views: 4674

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 254271

First NEVER override Woocommerce core files… Is strictly discouraged and will avoid you many problems.

Instead you can use all thousands of available hooks, editable templates or extend existing classes…

You can try the following code example that will add a custom checkout field with jQuery UI datepicker enabled for it:

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

Code goes in function.php file of your active child theme (or active theme). Tested and works.

You will get something like:

enter image description here

In the first function, you will be able to change the styling easily to match with Bootstap styles…

Upvotes: 3

Related Questions