Delivery Date Option on Checkout Page

First you will need to:

Enqueu main jquery-ui datepicker script
Change your custom script starting it with jQuery(function($){ instead of $(function(){ …
So to enable datepicker for your custom text field your code will be:

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

// Call datepicker functionality in your custom text field
add_action('woocommerce_after_order_notes', 'my_custom_checkout_field', 10, 1);
function my_custom_checkout_field( $checkout ) {

    date_default_timezone_set('America/Los_Angeles');
    $mydateoptions = array('' => __('Select PickupDate', 'woocommerce' ));

    echo '<div id="my_custom_checkout_field">
    <h3>'.__('Delivery Info').'</h3>';

    // YOUR SCRIPT HERE BELOW 
    echo '
    <script>
        jQuery(function($){
            $("#datepicker").datepicker();
        });
    </script>';

   woocommerce_form_field( 'order_pickup_date', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'id'            => 'datepicker',
        'required'      => true,
        'label'         => __('Delivery Date'),
        'placeholder'       => __('Select Date'),
        'options'     =>   $mydateoptions
        ),$checkout->get_value( 'order_pickup_date' ));

    echo '</div>';
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

Hi Carlos – thank you for the reply!

Couple of follow ups:

A: confirming the code is added correctly?
screenshot – https://ibb.co/8BzT7L6

B: I added some custom css to make the calendar fit my brand colors, and curious if i can make the size of the popup a bit smaller: (50% if possible)
https://ibb.co/DL5QKNx

C: How can i add a short memo right below the h3 tag:
Sample – https://ibb.co/VBCBmPg

D: How can i add the selected delivery date to the “thank you page”, the email template sent to both the admin and the customer?
Sample:

Thank you page – https://ibb.co/RBrWDBT
Email template – https://ibb.co/RThKqx8

*i can add the h3 title but not sure how to inject date for both of these templates.

Hi

A: confirming the code is added correctly?
- Yes
C: How can i add a short memo right below the h3 tag:
you can do like this way.

    <h3>'.__('Delivery Info').'</h3>';
	<o>'.__('Add your text here').'</p>';

For adding delivery date in email template:
https://stackoverflow.com/questions/31490405/woocommerce-add-custom-checkout-field-to-email

On Thank you page:
https://stackoverflow.com/questions/66468577/added-custom-fields-not-showing-up-in-thank-you-page-billing-address-section-in

note: Change your meta keys.

Thanks
Ahir Hemant

Thank you for the reply.

I was able to successfully setup the calendar select fields and stuck on one item:
video demo – https://streamable.com/dtf3if

When you try to select a date on mobile it causes the page to overflow.

-I tried adding overflow hidden in the CSS ( both for the .ui-datepicker and the section its currently in and not getting anywhere.

Screenshot –
https://ibb.co/MZb4Gyg – custom css
https://ibb.co/fCtX6Dr – section

Any suggestions?

Hi there @richtercaterers001 ??

Hello All – how can i add a delivery date (calendar select field if possible) to my checkout page so the customer can select a date & time for delivery.

Thanks for reaching out! Feel free to look into the Checkout Field Editor extension, as it will enable you to optimize your checkout process by adding, removing or editing fields to suit your needs. The editor supports several types for custom fields including text, select, checkboxes, and datepickers.

I trust that points you in the right direction, but if you have more questions, let us know. We’re happy to help.

• This reply was modified 2 years ago by anastas10s. Reason: missing: extension